Скачать react native gifted chat - react native gifted chat Загрузка исходного кода

Одаренный чат

Самый полный пользовательский интерфейс чата для React Native и Web.

Демонстрационный веб-сайт?

Закусочная игровая площадка GiftedChat

Спонсор

Coding Bootcamp в Париже, соучредителем которого является Фарид Сафи.

Нажмите, чтобы узнать больше

Масштабируемый API/сервер чата, написанный на Go

API-тур | Учебник по React Native Gifted

Полноценный движок приложений с GiftedChat

Посетите наш GitHub

Функции

? веб-конфигурация с возможностью react-native-web (начиная с версии 0.10.0)
Пишите с помощью TypeScript (начиная с версии 0.8.0)
Полностью настраиваемые компоненты
Действия композитора (прикрепление фотографий и т.п.)
Загрузить более ранние сообщения
Копировать сообщения в буфер обмена
Сенсорные ссылки с использованием React-native-parsed-text
Аватар как инициалы пользователя
Локализованные даты
Многострочный ввод текста
Панель инструментов ввода без клавиатуры
Поддержка Redux
Системное сообщение
Сообщения быстрого ответа (бот)
Индикатор набора текста

Начиная

Установка

Установить зависимости

Пряжа:

yarn add react-native-gifted-chat react-native-reanimated react-native-safe-area-context react-native-get-random-values

Нпм:

npm install --save react-native-gifted-chat react-native-reanimated react-native-safe-area-context react-native-get-random-values

Экспо

npx expo install react-native-gifted-chat react-native-reanimated react-native-safe-area-context react-native-get-random-values

Пользователи, не участвующие в выставке

npx pod-install

Настройка контекста реагирования-родной-безопасной области

Следуйте руководству: реагирование-родной-безопасный-контекст области

Настройка реакции-родной-реанимированной

Следуйте руководству: реагировать-родной-реанимированный

реакция-родное-видео и выставка-av

Обе зависимости удалены с 0.11.0 .
Вы по-прежнему сможете предоставить video , но вам необходимо предоставить реквизит renderMessageVideo .

Тестирование

TEST_ID экспортируется как константы, которые можно использовать в выбранной вами библиотеке тестирования.

Gifted Chat использует onLayout для определения высоты контейнера чата. Чтобы вызвать onLayout во время тестов, вы можете запустить следующие фрагменты кода.

 const WIDTH = 200 ; // or any number
const HEIGHT = 2000 ; // or any number

const loadingWrapper = getByTestId ( TEST_ID . LOADING_WRAPPER )
fireEvent ( loadingWrapper , 'layout' , {
  nativeEvent : {
    layout : {
      width : WIDTH ,
      height : HEIGHT ,
    } ,
  } ,
} )

У вас есть вопрос?

Пожалуйста, проверьте этот файл readme и возможно найдете ответ
Пожалуйста, сначала спросите StackOverflow: https://stackoverflow.com/questions/tagged/react-native-gifted-chat
Найдите ответ на существующие проблемы
Старайтесь оставлять проблемы ради проблем

Пример

 import React , { useState , useCallback , useEffect } from 'react'
import { GiftedChat } from 'react-native-gifted-chat'

export function Example ( ) {
  const [ messages , setMessages ] = useState ( [ ] )

  useEffect ( ( ) => {
    setMessages ( [
      {
        _id : 1 ,
        text : 'Hello developer' ,
        createdAt : new Date ( ) ,
        user : {
          _id : 2 ,
          name : 'React Native' ,
          avatar : 'https://placeimg.com/140/140/any' ,
        } ,
      } ,
    ] )
  } , [ ] )

  const onSend = useCallback ( ( messages = [ ] ) => {
    setMessages ( previousMessages =>
      GiftedChat . append ( previousMessages , messages ) ,
    )
  } , [ ] )

  return (
    < GiftedChat
      messages = { messages }
      onSend = { messages => onSend ( messages ) }
      user = { {
        _id : 1 ,
      } }
    />
  )
}

Расширенный пример

См. App.tsx для рабочей демонстрации!

«Слабый» пример

В файлах example/example-slack-message приведен пример того, как переопределить пользовательский интерфейс по умолчанию, чтобы сделать что-то более похожее на Slack — с отображаемыми именами пользователей и всеми сообщениями слева.

Объект сообщения

например, сообщение в чате

 export interface IMessage {
  _id : string | number
  text : string
  createdAt : Date | number
  user : User
  image ?: string
  video ?: string
  audio ?: string
  system ?: boolean
  sent ?: boolean
  received ?: boolean
  pending ?: boolean
  quickReplies ?: QuickReplies
}

 {
  _id : 1 ,
  text : 'My message' ,
  createdAt : new Date ( Date . UTC ( 2016 , 5 , 11 , 17 , 20 , 0 ) ) ,
  user : {
    _id : 2 ,
    name : 'React Native' ,
    avatar : 'https://facebook.github.io/react/img/logo_og.png' ,
  } ,
  image : 'https://facebook.github.io/react/img/logo_og.png' ,
  // You can also add a video prop:
  video : 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4' ,
  // Mark the message as sent, using one tick
  sent : true ,
  // Mark the message as received, using two tick
  received : true ,
  // Mark the message as pending with a clock loader
  pending : true ,
  // Any additional custom parameters are passed through
}

например, системное сообщение

 {
  _id : 1 ,
  text : 'This is a system message' ,
  createdAt : new Date ( Date . UTC ( 2016 , 5 , 11 , 17 , 20 , 0 ) ) ,
  system : true ,
  // Any additional custom parameters are passed through
}

например сообщение чата с опциями быстрого ответа

См. PR № 1211.

 interface Reply {
  title : string
  value : string
  messageId ?: number | string
}

interface QuickReplies {
  type : 'radio' | 'checkbox'
  values : Reply [ ]
  keepIt ?: boolean
}

  {
    _id : 1 ,
    text : 'This is a quick reply. Do you love Gifted Chat? (radio) KEEP IT' ,
    createdAt : new Date ( ) ,
    quickReplies : {
      type : 'radio' , // or 'checkbox',
      keepIt : true ,
      values : [
        {
          title : '? Yes' ,
          value : 'yes' ,
        } ,
        {
          title : '? Yes, let me show you with a picture!' ,
          value : 'yes_picture' ,
        } ,
        {
          title : '? Nope. What?' ,
          value : 'no' ,
        } ,
      ] ,
    } ,
    user : {
      _id : 2 ,
      name : 'React Native' ,
    } ,
  } ,
  {
    _id : 2 ,
    text : 'This is a quick reply. Do you love Gifted Chat? (checkbox)' ,
    createdAt : new Date ( ) ,
    quickReplies : {
      type : 'checkbox' , // or 'radio',
      values : [
        {
          title : 'Yes' ,
          value : 'yes' ,
        } ,
        {
          title : 'Yes, let me show you with a picture!' ,
          value : 'yes_picture' ,
        } ,
        {
          title : 'Nope. What?' ,
          value : 'no' ,
        } ,
      ] ,
    } ,
    user : {
      _id : 2 ,
      name : 'React Native' ,
    } ,
  }

Реквизит

messageContainerRef (FlatList ref) — ссылка на плоский список.
textInputRef (TextInput ref) — Ссылка на ввод текста
messages (Массив) — Сообщения для отображения.
isTyping (Bool) — состояние индикатора набора текста; по умолчанию false . Если вы используете renderFooter он переопределит это.
text (Строка) — Введите текст; по умолчанию — undefined , но если оно указано, оно переопределит внутреннее состояние GiftedChat (например, для redux; см. примечания ниже).
placeholder (строка) — заполнитель, когда text пуст; по умолчанию: 'Type a message...'
messageIdGenerator (Функция) — генерирует идентификатор для новых сообщений. По умолчанию используется UUID v4, созданный uuid.
user (Объект) — Пользователь, отправляющий сообщения: { _id, name, avatar }
onSend (Функция) — Обратный вызов при отправке сообщения
alwaysShowSend (Bool) — Всегда показывать кнопку отправки в редакторе входного текста; по умолчанию false , показывать только тогда, когда ввод текста не пуст
locale (Строка) — Локаль для локализации дат. Сначала вам нужно импортировать нужную локаль (т.е. require('dayjs/locale/de') или import 'dayjs/locale/fr' )
timeFormat (String) — формат, используемый для времени рендеринга; по умолчанию — 'LT' (см. Формат Day.js).
dateFormat (String) — формат, используемый для отображения дат; по умолчанию — 'll' (см. формат Day.js).
loadEarlier (Bool) — включает кнопку «Загрузить более ранние сообщения», необходимую для infiniteScroll
onLoadEarlier (Функция) — обратный вызов при загрузке более ранних сообщений
isLoadingEarlier (Bool) — отображать индикатор ActivityIndicator при загрузке более ранних сообщений.
renderLoading (Функция) — отображает представление загрузки при инициализации.
renderLoadEarlier (Функция) — пользовательская кнопка «Загрузить предыдущие сообщения».
renderAvatar (Функция) — Пользовательский аватар сообщения; установите значение null , чтобы не отображать аватар для сообщения
showUserAvatar (Bool) — отображать ли аватар для текущего пользователя; по умолчанию установлено значение false , показывать только аватары других пользователей.
showAvatarForEveryMessage (Bool) — если установлено значение false, аватары будут отображаться только в том случае, если последовательное сообщение отправлено от одного и того же пользователя в один и тот же день; по умолчанию — false
onPressAvatar (Function( user )) — обратный вызов при нажатии на аватар сообщения.
onLongPressAvatar (Function( user )) — обратный вызов при длительном нажатии аватара сообщения.
renderAvatarOnTop (Bool) — отображать аватар сообщения вверху последовательных сообщений, а не внизу; по умолчанию — false
renderBubble (Функция) — всплывающее окно с пользовательским сообщением.
renderTicks (Function( message )) — пользовательский индикатор тиков для отображения статуса сообщения.
renderSystemMessage (Функция) — Пользовательское системное сообщение
onPress (Функция( context , message )) — обратный вызов при нажатии пузырька сообщения.
onLongPress (Function( context , message )) — обратный вызов при длительном нажатии на пузырь сообщения (см. пример с использованием showActionSheetWithOptions() )
inverted (Bool) — меняет порядок отображения messages ; по умолчанию true
renderUsernameOnMessage (Bool) — указывает, следует ли отображать имя пользователя внутри пузырька сообщения; по умолчанию — false
renderUsername (Функция) — контейнер пользовательского имени пользователя.
renderMessage (Функция) — Пользовательский контейнер сообщений.
renderMessageText (Функция) — Текст пользовательского сообщения.
renderMessageImage (Функция) — изображение пользовательского сообщения.
renderMessageVideo (Функция) — видео пользовательского сообщения.
imageProps (Object) — дополнительные реквизиты, которые будут переданы в компонент <Image> , созданный с помощью renderMessageImage по умолчанию.
videoProps (Object) — дополнительные реквизиты, которые будут переданы видеокомпоненту, созданному требуемым renderMessageVideo
lightboxProps (Object) — дополнительные реквизиты, которые будут переданы в Lightbox MessageImage
isCustomViewBottom (Bool) — определяет, отображается ли renderCustomView до или после просмотра текста, изображения и видео; по умолчанию — false
renderCustomView (Функция) — Пользовательский вид внутри пузырька.
renderDay (Функция) — Пользовательский день над сообщением.
renderTime (Функция) — Пользовательское время внутри сообщения.
renderFooter (Функция) — пользовательский компонент нижнего колонтитула в ListView, например 'User is typing...' ; см. пример App.tsx. Переопределяет индикатор набора текста по умолчанию, который срабатывает, когда isTyping имеет значение true.
renderChatEmpty (Функция) — пользовательский компонент для отображения в ListView, когда сообщения пусты.
renderChatFooter (функция) — пользовательский компонент для рендеринга под MessageContainer (отдельно от ListView).
renderInputToolbar (Функция) — контейнер композитора пользовательских сообщений.
renderComposer (Функция) — создание пользовательского текстового сообщения для ввода текста.
renderActions (Функция) — кнопка настраиваемого действия слева от составителя сообщения.
renderSend (Функция) — Пользовательская кнопка отправки; вы можете довольно легко передать дочерние элементы исходному компоненту Send , например, используя собственный значок (пример)
renderAccessory (Функция) — вторая строка действий под композитором сообщения.
onPressActionButton (Функция) — обратный вызов при нажатии кнопки «Действие» (если установлено, actionSheet по умолчанию не будет использоваться)
bottomOffset (Целое число) — расстояние чата от нижней части экрана (например, полезно, если вы отображаете панель вкладок)
minInputToolbarHeight (Целое число) — Минимальная высота панели инструментов ввода; по умолчанию 44
listViewProps (Object) — дополнительные реквизиты, передаваемые в сообщения <ListView> ; некоторые реквизиты не могут быть переопределены, подробности см. в коде MessageContainer.render()
textInputProps (Object) — дополнительные реквизиты, которые будут переданы в <TextInput>
textInputStyle (Object) — пользовательский стиль, передаваемый в <TextInput>
multiline (Bool) — указывает, разрешено ли <TextInput> состоять из нескольких строк или нет; по умолчанию true .
keyboardShouldPersistTaps (Enum) — определяет, должна ли клавиатура оставаться видимой после касания; см. документацию <ScrollView>
onInputTextChanged (Функция) — обратный вызов при изменении входного текста
maxInputLength (Целое число) — максимальная длина TextInput композитора сообщения.
parsePatterns (функция) — пользовательские шаблоны анализа для реагирующего на анализируемый текст, используемые для связывания содержимого сообщения (например, URL-адресов и номеров телефонов), например:

 < GiftedChat
   parsePatterns = { ( linkStyle ) => [
     { type : 'phone' , style : linkStyle , onPress : this . onPressPhoneNumber } ,
     { pattern : / #(w+) / , style : { ... linkStyle , styles . hashtag } , onPress : this . onPressHashtag } ,
   ] }
 />

extraData (Object) — дополнительные реквизиты для повторной отрисовки FlatList по требованию. Это будет полезно для рендеринга нижнего колонтитула и т. д.
minComposerHeight (Object) — пользовательская минимальная высота композитора.
maxComposerHeight (Объект) — пользовательская максимальная высота композитора.

scrollToBottom (Bool) — включает прокрутку вниз. Компонент (по умолчанию — false)
scrollToBottomComponent (Функция) — контейнер пользовательского прокрутки до нижнего уровня компонента.
scrollToBottomOffset (Целое число) — пользовательское смещение по высоте, после которого начинается отображение компонента «Прокрутка до нижнего уровня» (по умолчанию — 200).
scrollToBottomStyle (Object) — пользовательский стиль для контейнера нижнего компонента.
alignTop (Boolean) Определяет, отображаются ли пузырьки сообщений вверху чата (по умолчанию — false — пузырьки выравниваются по низу)
onQuickReply (Функция) — обратный вызов при отправке быстрого ответа (на внутренний сервер)
renderQuickReplies (Функция) — Пользовательский просмотр всех быстрых ответов.
quickReplyStyle (StyleProp) — пользовательский стиль просмотра быстрого ответа.
renderQuickReplySend (Функция) — Пользовательский вид отправки быстрого ответа
shouldUpdateMessage (функция) — позволяет компоненту сообщения знать, когда обновляться за пределами обычных случаев.
infiniteScroll (Bool) — бесконечная прокрутка вверх при достижении верхней части контейнера сообщений, автоматически вызывает функцию onLoadEarlier, если она существует (пока не поддерживается в Интернете). Вам также необходимо добавить поддержку loadEarlier .
isStatusBarTranslucentAndroid (Bool) — если вы используете полупрозрачную строку состояния на Android, установите для этого параметра значение true. Игнорируется на iOS.

Примечания для Redux

Опция messages должна работать с Redux «из коробки». В большинстве случаев это все, что вам нужно.

Если вы решите указать text реквизит, GiftedChat больше не будет управлять своим собственным внутренним text состоянием и будет полностью подчиняться вашему реквизиту. Это отлично подходит для использования такого инструмента, как Redux, но вам нужно будет сделать еще один шаг: просто реализовать onInputTextChanged для получения событий ввода и событий сброса (например, для очистки текста onSend ):

 < GiftedChat
  text = { customText }
  onInputTextChanged = { text => this . setCustomText ( text ) }
  /* ... */
/>

Заметки для Android

Если вы используете Create React Native App/Expo, никаких конкретных действий по установке Android не требуется — вы можете пропустить этот раздел. В противном случае мы рекомендуем изменить конфигурацию вашего проекта следующим образом.

Убедитесь, что в вашем AndroidManifest.xml есть android:windowSoftInputMode="adjustResize" :

< activity
  android : name = " .MainActivity "
  android : label = " @string/app_name "
  android : windowSoftInputMode = " adjustResize "
  android : configChanges = " keyboard|keyboardHidden|orientation|screenSize " >

Для Expo есть как минимум два решения, чтобы это исправить:
- Добавьте KeyboardAvoidingView после GiftedChat. Это следует делать только для Android, поскольку KeyboardAvoidingView может конфликтовать с функцией предотвращения клавиатуры iOS, уже встроенной в GiftedChat, например:

 <View style={{ flex: 1 }}>
   <GiftedChat />
   {
      Platform.OS === 'android' && <KeyboardAvoidingView behavior="padding" />
   }
</View>

Если вы используете React Navigation, может потребоваться дополнительная обработка для учета заголовков и вкладок навигации. Свойство KeyboardAvoidingView keyboardVerticalOffset может быть установлено на высоту навигационного заголовка, а tabBarOptions.keyboardHidesTabBar может быть установлен так, чтобы панель вкладок не отображалась при поднятой клавиатуре. Из-за ошибки с расчетом высоты на телефонах Android с вырезами, KeyboardAvoidingView рекомендуется использовать вместо других решений, предполагающих расчет высоты окна.

добавление непрозрачной фоновой строки состояния в app.json (хотя android:windowSoftInputMode="adjustResize" установлен внутри приложений Expo для Android, полупрозрачная строка состояния приводит к тому, что она не работает): https://docs.expo.io/versions /latest/guides/configuration.html#androidstatusbar
Если вы планируете использовать GiftedChat внутри Modal , см. #200.

Примечания для местного развития

Родной

Установите yarn global add expo-cli
Установить зависимости yarn install
expo start

реагировать-родной-веб

С выставкой

Установите yarn global add expo-cli
Установить зависимости yarn install
expo start -w

Обновить версию закуски

С помощью приложения create-реагировать

yarn add -D react-app-rewired
touch config-overrides.js

 module . exports = function override ( config , env ) {
  config . module . rules . push ( {
    test : / .js$ / ,
    exclude : / node_modules[/\](?!react-native-gifted-chat|react-native-lightbox|react-native-parsed-text) / ,
    use : {
      loader : 'babel-loader' ,
      options : {
        babelrc : false ,
        configFile : false ,
        presets : [
          [ '@babel/preset-env' , { useBuiltIns : 'usage' } ] ,
          '@babel/preset-react' ,
        ] ,
        plugins : [ '@babel/plugin-proposal-class-properties' ] ,
      } ,
    } ,
  } )

  return config
}

Здесь вы найдете пример и веб-демо : xcarpentier/gifted-chat-web-demo.

Другой пример с Гэтсби : xcarpentier/clean-archi-boilerplate.

Вопросы

Как я могу установить цвет пузырька для каждого пользователя?
Как передать реквизиты стиля в дизайн панели InputToolbar и настроить ее цвет и другие свойства стилей?
Как изменить цвет окна сообщения?
Есть ли способ вручную отключить клавиатуру?
Я хочу реализовать всплывающее окно, которое появляется сразу после нажатия на определенный аватар. Какая реализация в этом случае лучше всего и как?
Почему TextInput скрыт на Android?
Как использовать renderLoading?
Могу ли я использовать MySql для сохранения сообщения?