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

【问题标题】：How to customize react-native-gifted-chat in React Native 0.61如何在 React Native 0.61 中自定义 react-native-gifted-chat
【发布时间】：2020-02-13 10:44:19
【问题描述】：

只是想分享。

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

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

查看答案

【问题讨论】：

标签： javascript react-native react-native-gifted-chat

【解决方案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）中列出，您可以在@987654329 上Cmd + Left Click @ 标签在你的编辑器中。这会将您导航到列出所有道具的源文件。 注意不要编辑任何内容！

将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>
    );
  };

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

你已经完成了

希望这会有所帮助！

【讨论】：