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

Question

只是想分享。

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

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

查看答案

Answer 1

进行导入

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

自定义输入工具栏

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

创建一个名为 customInputToolbar 的函数，它将 return 自定义 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 )，您可以在编辑器中的 InputToolbar 标签上 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 作为道具

大功告成

希望对您有所帮助！

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

How to customize react-native-gifted-chat in React Native 0.61

javascript

react-native

react-native-gifted-chat

自定义输入工具栏

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