如何在 React Native 0.61 中自定义 react-native-gifted-chat

Question

只是想分享。

我发现很难为这个包自定义默认 UI。官方文档没有那么有用。

幸运的是，我能够解决它。

查看答案

Answer 1

使您的进口

import {GiftedChat, InputToolbar,...} from 'react-native-gifted-chat'

自定义输入工具栏

注意：必须导入，因为我们要自定义它 InputToolbar

创建一个被调用的函数customInputToolbar，该函数将返回自定义 UI

const customtInputToolbar = props => {
  return (
    <InputToolbar
      {...props}
      containerStyle={{
        backgroundColor: "white",
        borderTopColor: "#E8E8E8",
        borderTopWidth: 1,
        padding: 8
      }}
    />
  );
};

注意：必须是参数。 props

提示：由于InputToolbar官方 github 页面 ( https://github.com/FaridSafi/react-native-gifted-chat )中未列出 的所有道具，因此您可以Cmd + Left Click在InputToolbar编辑器中的标签上。这将导航到列出所有道具的源文件。小心不要编辑任何东西！！

renderInputToolbar在GiftedChat组件中包含作为道具

<GiftedChat
    messages={chatMessages.messages}
    onSend={messages => sendMessage(messages)}
    renderInputToolbar={props => customtInputToolbar(props)}
    ...
 />

注意：记住props作为参数传递给函数。没有这个，UI 将不会显示

你完成了 ！！

自定义 SystemMessage 组件或使用完全自定义的 UI

包含SystemMessage在您的导入中

创建一个名为的函数 customSystemMessage

  const customSystemMessage = props => {
    return (
      <View style={styles.ChatMessageSytemMessageContainer}>
        <Icon name="lock" color="#9d9d9d" size={16} />
        <Text style={styles.ChatMessageSystemMessageText}>
          Your chat is secured. Remember to be cautious about what you share
          with others.
        </Text>
      </View>
    );
  };

renderSystemMessage在您的GiftedChat组件中作为道具包含

你完成了

希望这可以帮助！