React Native Gifted Chat

活跃
GitHub TypeScript MIT

简介

React Native Gifted Chat 是最完整的 React Native 聊天 UI 库，支持 iOS、Android 和 Web，提供高度可定制的消息组件。

核心特性

  • 跨平台兼容 — 同时支持 iOS、Android、Web（react-native-web）和 Expo 项目
  • 高度可定制 — 任何组件都可被自定义实现覆盖
  • 完整消息能力 — 附件、回复引用、加载历史消息、复制、链接解析
  • 智能交互 — Quick Reply、正在输入、已读/已送达状态、回到消息底部
  • TypeScript 原生 — 完整 TypeScript 类型定义
  • 多语言本地化 — 通过 Day.js 支持完整 i18n 日期显示

适用场景

💡 为 React Native 移动应用快速集成聊天 UI
💡 在 Web 端用 react-native-web 复用同一套聊天组件
💡 配合 LLM API 快速搭建带打字指示器和已读状态的 AI 聊天 App
💡 替换自研聊天组件以节省维护成本
💡 通过覆盖组件实现 Slack 风格、Messenger 风格等品牌定制

标签

chat-ui react-native typescript mobile chat-library

分类

💬 聊天界面

快速开始

# 在 Expo 项目中安装
npx expo install react-native-gifted-chat react-native-reanimated react-native-gesture-handler

# 在原生 RN 项目中安装
npm install --save react-native-gifted-chat react-native-reanimated react-native-gesture-handler
npx pod-install

# 在 React 组件中使用 GiftedChat
import { GiftedChat } from 'react-native-gifted-chat'
import { useState, useCallback, useEffect } from 'react'

export function ChatScreen() {
  const [messages, setMessages] = useState([])
  useEffect(() => {
    setMessages([{ _id: 1, text: 'Hello!', createdAt: new Date(), user: { _id: 2 } }])
  }, [])
  const onSend = useCallback((msgs = []) => setMessages(p => GiftedChat.append(p, msgs)), [])
  return <GiftedChat messages={messages} onSend={onSend} user={{ _id: 1 }} />
}
访问 GitHub 访问官网 查看文档

相关项目