React Native Gifted Chat 使用教程
项目介绍
react-native-gifted-chat
是一个为 React Native 应用提供完整聊天界面 UI 的开源项目。它支持文本、媒体消息的发送,具有高度可定制化的组件,适用于构建各种聊天应用。项目由 Farid Safi 发起并维护,拥有超过 13,000 颗星和 3,500 个 forks,是 React Native 社区中非常受欢迎的聊天 UI 库。
项目快速启动
安装
首先,你需要安装 react-native-gifted-chat
包。你可以使用 npm 或 yarn 进行安装:
# 使用 npm
npm install react-native-gifted-chat --save
# 使用 yarn
yarn add react-native-gifted-chat
基本使用
以下是一个简单的示例,展示如何在 React Native 项目中使用 react-native-gifted-chat
:
import React, { useState, useCallback, useEffect } from 'react';
import { GiftedChat } from 'react-native-gifted-chat';
export default function Chat() {
const [messages, setMessages] = useState([]);
useEffect(() => {
setMessages([
{
_id: 1,
text: 'Hello developer',
createdAt: new Date(),
user: {
_id: 2,
name: 'React Native',
},
},
]);
}, []);
const onSend = useCallback((newMessages = []) => {
setMessages(previousMessages => GiftedChat.append(previousMessages, newMessages));
}, []);
return (
<GiftedChat
messages={messages}
onSend={newMessages => onSend(newMessages)}
user={{
_id: 1,
}}
/>
);
}
应用案例和最佳实践
自定义消息渲染
你可以通过 renderMessage
属性来自定义消息的渲染方式:
<GiftedChat
messages={messages}
onSend={newMessages => onSend(newMessages)}
user={{
_id: 1,
}}
renderMessage={props => {
return (
<View style={{ margin: 10 }}>
<Text>{props.currentMessage.text}</Text>
</View>
);
}}
/>
添加媒体消息
虽然 react-native-gifted-chat
本身不包含视频和图片的直接支持,但你可以通过 renderMessageVideo
和 renderMessageImage
属性来实现自定义的媒体消息渲染:
<GiftedChat
messages={messages}
onSend={newMessages => onSend(newMessages)}
user={{
_id: 1,
}}
renderMessageVideo={props => {
return (
<View>
<Video source={{ uri: props.currentMessage.video }} />
</View>
);
}}
renderMessageImage={props => {
return (
<View>
<Image source={{ uri: props.currentMessage.image }} />
</View>
);
}}
/>
典型生态项目
结合 Firebase
react-native-gifted-chat
常与 Firebase 结合使用,以实现实时消息传递功能。以下是一个简单的示例:
import React, { useState, useEffect } from 'react';
import { GiftedChat } from 'react-native-gifted-chat';
import firebase from 'firebase';
export default function Chat() {
const [messages, setMessages] = useState([]);
useEffect(() => {
firebase
.database()
.ref('messages')
.on('value', snapshot => {
const messages = [];
snapshot.forEach(child => {
messages.push(child.val());
});
setMessages(messages);
});
}, []);
const onSend = (newMessages = []) => {
firebase
.database()
.ref('messages')
.push(newMessages[0]);
};
return (
<GiftedChat