如何在Gifted Chat的聊天气泡Bubble右侧添加回复按钮

实现思路 #

• 自定义renderBubble方法时，将原生Bubble组件与回复按钮包裹在同一行布局容器中
• 通过GiftedChat传入的position属性判断气泡类型，仅在右侧（当前用户发送的消息）气泡旁渲染回复按钮
• 自定义回复按钮的样式与点击回调逻辑即可

修改后完整代码 #

import React from 'react';
import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';
import { Bubble } from 'react-native-gifted-chat';

export const renderBubble = props => {
  // 回复按钮点击逻辑，可根据业务需求自定义
  const handleReply = () => {
    console.log('回复当前消息', props.currentMessage);
    // 这里可以写你的回复逻辑，比如把当前消息内容填充到输入框、标记待回复消息等
  };

  return (
    <View style={styles.bubbleContainer}>
      {/* 原生Bubble组件保留原有配置 */}
      <Bubble
        {...props}
        wrapperStyle={{
          left: {
            backgroundColor: '#FFFFFF',
            display: 'flex',
            flexDirection: 'row',
            borderBottomLeftRadius: 0,
          },
          right: {
            backgroundColor: '#1D4ED8',
            left: 0,
            marginBottom: 15,
            borderBottomRightRadius: 0,
          },
        }}
        tickStyle={{color: 'red'}}
      />
      {/* 仅右侧气泡显示回复按钮 */}
      {props.position === 'right' && (
        <TouchableOpacity style={styles.replyBtn} onPress={handleReply}>
          <Text style={styles.replyBtnText}>回复</Text>
        </TouchableOpacity>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  bubbleContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    // 右侧气泡整体靠右对齐
    justifyContent: 'flex-end',
    width: '100%',
  },
  replyBtn: {
    marginLeft: 8,
    marginBottom: 15, // 和气泡的marginBottom保持一致
    paddingHorizontal: 10,
    paddingVertical: 4,
    borderRadius: 4,
    backgroundColor: '#f0f0f0',
  },
  replyBtnText: {
    fontSize: 12,
    color: '#333',
  }
});

注意事项 #

• 如果需要调整按钮的位置、样式，直接修改styles里的对应配置即可
• props.currentMessage里包含当前消息的全部信息（id、内容、发送人id等），可以直接在回复逻辑中取用
• 如果你需要长按气泡才显示回复按钮，可以把回复按钮的显示逻辑换成状态控制，绑定Bubble的长按事件触发状态变更即可

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