React Native聊天应用：为离线、在线消息设置不同消息容器样式

要给在线消息设置纯色背景、离线消息设置透明背景，核心是利用组件的样式自定义能力，结合每条消息的在线状态标识来区分样式。以下是具体实现步骤：

1. 给消息数据添加在线状态标识 #

首先，确保每条消息对象中包含一个用于区分在线/离线的字段（比如isOnline），这个字段需要你在发送消息时根据当前网络状态设置：

const messages = [
  {
    _id: 1,
    text: "这是一条在线发送的消息",
    createdAt: new Date(),
    user: { _id: 1, name: "当前用户" },
    isOnline: true // 标记为在线消息
  },
  {
    _id: 2,
    text: "这是一条离线缓存的消息",
    createdAt: new Date(),
    user: { _id: 1, name: "当前用户" },
    isOnline: false // 标记为离线消息
  }
];

2. 通过messageContainerStyle快速设置样式 #

messageContainerStyle支持传入一个函数，根据当前消息的属性动态返回样式，这是最简单的实现方式：

import { GiftedChat } from "react-native-gifted-chat";

// 在组件中使用
<GiftedChat
  messages={messages}
  onSend={(newMessages) => handleSend(newMessages)}
  user={{ _id: 1 }}
  messageContainerStyle={(props) => {
    const isOnline = props.currentMessage.isOnline;
    return {
      backgroundColor: isOnline ? "#E5E5EA" : "transparent", // 在线纯色，离线透明
      borderRadius: 16,
      paddingHorizontal: 12,
      paddingVertical: 8,
      marginVertical: 4
    };
  }}
/>

3. 自定义消息气泡（复杂场景） #

如果需要更精细的样式控制（比如调整文字颜色、添加边框等），可以使用renderMessage完全自定义消息组件：

import { View, Text } from "react-native";
import { GiftedChat } from "react-native-gifted-chat";

const renderCustomMessage = (props) => {
  const { currentMessage } = props;
  const isOnline = currentMessage.isOnline;
  // 区分自己和对方的消息对齐方式
  const alignSelf = currentMessage.user._id === 1 ? "flex-end" : "flex-start";

  return (
    <View
      style={{
        alignSelf,
        marginVertical: 4,
        paddingHorizontal: 12,
        paddingVertical: 8,
        backgroundColor: isOnline ? "#E5E5EA" : "transparent",
        borderRadius: 16,
        borderWidth: isOnline ? 0 : 1,
        borderColor: "#ccc" // 离线消息可以加个边框增强辨识度
      }}
    >
      <Text style={{ color: isOnline ? "#000" : "#666" }}>
        {currentMessage.text}
      </Text>
    </View>
  );
};

// 在GiftedChat中使用自定义渲染
<GiftedChat
  messages={messages}
  onSend={(newMessages) => handleSend(newMessages)}
  user={{ _id: 1 }}
  renderMessage={renderCustomMessage}
/>

注意事项 #

• 网络状态判断可以使用@react-native-community/netinfo库，在发送消息时给消息添加isOnline标识；
• 如果需要区分对方消息的在线状态，只需要调整isOnline的判断逻辑（比如根据对方用户的在线状态字段）即可。

内容的提问来源于stack exchange，提问作者Nida Khan