javascript - 如何在 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 的所有 Prop 没有在官方github页面( https://github.com/FaridSafi/react-native-gifted-chat)中列出，你可以 Cmd + Left Click在 InputToolbar在编辑器中添加标签。这会将您导航到列出所有 Prop 的源文件。 小心不要编辑任何东西!

包括 renderInputToolbar作为 GiftedChat 中的 Prop 零件

<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 中的 Prop 零件

你完成了

希望这可以帮助!