Question

我试图改变聊天气泡的背景颜色来自本机。

这里似乎很简单：https://github.com/FaridSafi/react-native-gifted-chat/issues/493

这正是我添加的代码，但后来我得到了

You likely forgot to export your component from the file it's defined in.
Check the render method of `Message`.

这导致我尝试了许多不起作用的不同事物。而且我知道它一定非常简单，但我对React Native几乎一无所知：/

你知道为什么会这样吗？提前谢谢！

Answer 1

您已导入Bubble吗？

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

您是否已将renderBubble函数设置为GiftedChat的道具，如下所示？

<GiftedChat
            messages={this.state.messages}
            onSend={this.onSend}
            renderBubble={this.renderBubble}
            user={this.state.currentUser}
            showUserAvatar={true}
 />

Answer 2

如果要为两个用户显示不同的颜色，则可以使用。它还接受其他文本样式。

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


 <GiftedChat
    messages={messages}
    onSend={newMessage => onSend(newMessage)}
    renderBubble={props => {
      return (
        <Bubble
          {...props}

          textStyle={{
            right: {
              color: 'white',
              fontFamily: "CerebriSans-Book"
            },
            left: {
              color: '#24204F',
              fontFamily: "CerebriSans-Book"
            },
          }}
          wrapperStyle={{
            left: {
              backgroundColor: '#E6F5F3',
            },
            right: {
              backgroundColor: "#3A13C3",
            },
          }}
        />
      );
    }}                
    user={{
        _id: 1,
    }}
/>

React Native - 如何更改气泡样式

2 个答案: