Gifted Chat
made with React

Gifted Chat

这是一个基于React Native的聊天UI。

相关问答
暂无相关问题
查看全部
简介及使用教程

Gifted Chat是一个基于React Native的聊天UI,支持本地化日期、复制消息、多行文本输入、头像生成、快速答复等功能。

安装

Npm

npm i react-native-gifted-chat

Yarn

yarn add 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,
      }}
    />
  )
}

示例

chart.gif

作者

Farid Safi

@FaridSafi

相关项目

这是一个歌曲歌词搜索APP。
这是一个可定制和复用的React Native组件库。
这是一个基于React多设计选型的完全自定义头部视图组件。
这是一个是一个iOS,Android和React Native库。
这是一个用于自定义聊天应用程序的聊天API和SDK。
这是一个体重和卡路里跟踪应用。