如何修改react-native-gifted-chat组件的LoadEarlier标签文本？

Hey there! I've used react-native-gifted-chat quite a bit, so I can walk you through two easy ways to change that "Load earlier messages" label to your desired language:

1. Use the Built-in loadEarlierLabel Prop #

The simplest way is to pass the loadEarlierLabel prop directly to your <GiftedChat /> component. This will override the default label in the LoadEarlier component's defaultProps without needing to modify the library code.

Here's how to implement it:

<GiftedChat
  // Your existing props
  loadEarlier={true}
  isLoadingEarlier={false}
  loadEarlierLabel="加载更早消息" // Replace with your desired text
/>

2. Fully Customize with renderLoadEarlier (For Advanced Cases) #

If you need more control over the component's appearance (like adding custom styling, icons, or additional elements), you can use the renderLoadEarlier prop to render a completely custom component. This lets you handle the press action and content entirely on your own.

Example code:

import { TouchableOpacity, Text, StyleSheet } from 'react-native';

// ...

<GiftedChat
  // Your existing props
  loadEarlier={true}
  isLoadingEarlier={false}
  renderLoadEarlier={(props) => (
    <TouchableOpacity 
      onPress={props.onLoadEarlier}
      style={styles.loadEarlierButton}
    >
      <Text style={styles.loadEarlierText}>加载更早消息</Text>
    </TouchableOpacity>
  )}
/>

// Optional custom styles
const styles = StyleSheet.create({
  loadEarlierButton: {
    padding: 16,
    alignItems: 'center',
  },
  loadEarlierText: {
    color: '#1677ff',
    fontSize: 14,
  },
});

Either approach will let you adapt the label to your target language. The first method is perfect for just changing the text, while the second gives you full flexibility for design tweaks.

内容的提问来源于stack exchange，提问作者user11530349