Как настроить реактивный чат в React Native 0.61

Question

Просто хотел поделиться.

Мне было трудно настроить пользовательский интерфейс по умолчанию для этого пакета. Официальная документация не была такой полезной.

К счастью, я смог ее решить.

См. Ответ

Answer 1

Сделайте ваш импорт

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

Настройка InputToolbar

Примечание: InputToolbar необходимо импортировать, так как мы хотим чтобы настроить его

Создайте функцию с именем customInputToolbar, которая будет возвращать пользовательский интерфейс

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 в качестве аргумента функции. Без этого пользовательский интерфейс не будет отображать

Готово!

Настройка компонента SystemMessage или использование абсолютно пользовательского интерфейса

Включите 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 компонент

Готово

Надеюсь, это поможет!