【亲测免费】 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