如何使用React Native GetStream SDK处理提及点击跳转用户资料？

• 核心思路：通过自定义GetStream消息组件的提及渲染逻辑，给提及用户添加点击事件，触发跳转到个人资料页。

步骤1：自定义可点击的提及组件 #

创建一个接收用户提及数据的组件，添加点击事件处理跳转：

import { Text } from 'react-native';

const CustomMention = ({ mention, navigation }) => {
  const handleUserPress = () => {
    // 跳转到个人资料页，根据你的导航框架调整，这里以React Navigation为例
    navigation.navigate('UserProfile', { userId: mention.id });
  };

  return (
    <Text
      style={{ color: '#2563eb', fontWeight: 'bold' }}
      onPress={handleUserPress}
    >
      @{mention.name}
    </Text>
  );
};

步骤2：在GetStream消息组件中配置自定义提及渲染 #

在你的聊天频道界面中，给MessageSimple（或通过MessageList传递props）设置renderMention属性，使用上面的自定义组件：

import { Channel, MessageList, MessageSimple } from 'stream-chat-react-native';

// 假设你已经获取了channel实例和navigation对象
const ChatScreen = ({ channel, navigation }) => {
  return (
    <Channel channel={channel}>
      <MessageList
        messageProps={{
          renderMention: (props) => (
            <CustomMention {...props} navigation={navigation} />
          )
        }}
      />
      <MessageInput />
    </Channel>
  );
};

补充说明 #

• 确保你的消息数据中包含完整的mentions数组（发送消息时需正确配置GetStream的提及功能，生成包含用户ID、名称等信息的提及对象）
• 个人资料页UserProfile需接收userId参数，根据ID获取并展示用户信息
• 样式可根据你的APP设计自定义调整

内容的提问来源于stack exchange，提问作者Endrit Bajrami