时间戳

首页 > 解决方案 > 如何在 React Native 0.61 中自定义 react-native-gifted-chat

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

问题描述

只是想分享。

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

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

查看答案

标签： javascriptreact-nativereact-native-gifted-chat

解决方案

进行进口

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

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

在组件中包含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

你完成了

希望这可以帮助！

推荐阅读