React Native Gifted Chat自定义renderBubble遇两类问题求助

1. 修复props.isSameUser不是函数的错误 #

你碰到这个问题主要有两个原因：

• API版本差异：你参考的旧示例里，isSameUser是作为props传入renderBubble的，但新版本的react-native-gifted-chat已经把这个方法移到工具函数里了，不再包含在renderBubble的props集合中。
• 类型定义错误：你给renderBubble的参数指定了AvatarProps类型，但实际上renderBubble接收的是BubbleProps类型，这不仅会导致类型提示不准，还会让你错误地尝试从props中获取不存在的方法。

修复步骤：

• 先从库中导入isSameUser工具函数：

  import { GiftedChat, Bubble, isSameUser } from 'react-native-gifted-chat';
  

• 修正renderBubble的参数类型为BubbleProps（记得先导入对应类型）：

  import type { BubbleProps, IMessage } from 'react-native-gifted-chat';
  
  renderBubble = (props: Readonly<BubbleProps<IMessage>>) => {
    return (
      <View>
        {/* 直接调用导入的isSameUser，而非从props中获取 */}
        {!isSameUser(props.currentMessage, props.previousMessage) && (
          <Text>{props.currentMessage.user.name}</Text>
        )}
        <Bubble {...props} />
      </View>
    )
  }
  

2. 解决文本居中无法调整的问题 #

默认情况下Text组件会继承父容器的对齐样式，你可以通过自定义样式来修改，更灵活的方式是根据消息发送者动态调整对齐方向（比如对方消息左对齐，自己的消息右对齐）：

修改后的renderBubble示例代码：

renderBubble = (props: Readonly<BubbleProps<IMessage>>) => {
  // 替换成你项目中当前用户的ID
  const currentUserId = 'your-current-user-id';
  const isCurrentUser = props.currentMessage.user._id === currentUserId;
  const nameTextStyle = {
    textAlign: isCurrentUser ? 'right' : 'left',
    marginBottom: 4,
    fontSize: 12,
    color: '#666'
  };

  return (
    <View>
      {!isSameUser(props.currentMessage, props.previousMessage) && (
        <Text style={nameTextStyle}>{props.currentMessage.user.name}</Text>
      )}
      <Bubble {...props} />
    </View>
  )
}

这样设置后，对方消息的名称会左对齐，你自己发送的消息名称会右对齐，完美覆盖默认的居中样式。如果只是想统一设置成左/右对齐，直接给Text组件添加textAlign: 'left'或textAlign: 'right'样式即可。

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