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 风格等品牌定制

优势与不足

✅ 优势

• 活跃维护，近期持续更新
• 社区热度高（14.4k stars）
• 开源许可证友好（MIT）
• Issue 响应及时，积压少

分类

💬 聊天界面

快速开始

# 在 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 访问官网查看文档