2

我在我的 react-native 应用程序中使用 react-native-gifted-chat。聊天气泡样式在所有气泡上都不相同。我使用了borderRadius：30，因为第一个消息气泡形状正确显示，第二个消息气泡形状的气泡变得不同。我添加了以下代码：

 <Bubble
                {...props}
                wrapperStyle={{
                    right: {
                        backgroundColor: colors.chatPurple,
                        borderRadius: 30,
                        borderBottomRightRadius: 30,
                        marginBottom: 10,
                        padding: 5,
                        right: 15,
                        justifyContent: "flex-end",
                        alignSelf: 'stretch',
                        marginLeft: 0,
                        alignSelf: "center"
                    },
                    left: {
                        backgroundColor: colors.lightGreen,
                        borderRadius: 30,
                        marginBottom: 20,
                        padding: 5,
                        left: -30
                    }
                }}/>

聊天气泡形状不同

我想在所有气泡上获得相同的气泡形状。

4

4 回答 4

1

分别为每个角设置borderRadius（例如borderBottomRightRadius）对我有用。简单地设置borderRadius是行不通的，因为react-native-gifted-chat代码中的borderBottomRightRadius、borderTopRightRadius等会覆盖它，因为更精确的样式（每个角分开）总是覆盖更一般的样式（每个角都相同） .

于 2020-07-29T18:11:11.280 回答
0

使用 BordeRadius 添加此气泡或仅添加容器样式

<Bubble
     {...props}
     wrapperStyle={{
     right: 
     {
        height: 200,
        backgroundColor: 'blue',
     },
}}
/>
于 2021-04-02T06:43:31.090 回答
0

我遇到了一个类似的问题，我想在 4 个角中的 3 个角上设置一个半径，但它只适用于第一个气泡：

有天赋的聊天气泡边界半径问题

在containerToPreviousStyle,containerToNextStyle和containerStyleprops 上设置 BorderRadius 属性后，我让它按预期工作：

在此处输入图像描述

代码如下：

const renderBubble = props => {
    return (
      <Bubble
        {...props}

        {/* copy what you have in wrapperStyle */}

        wrapperStyle={{
          right: { borderTopRightRadius: 15 },
          left: { borderTopLeftRadius: 15 },
        }}

        {/* and paste it into the follow 3 */}

        containerToPreviousStyle={{
          right: { borderTopRightRadius: 15 },
          left: { borderTopLeftRadius: 15 },
        }}
        containerToNextStyle={{
          right: { borderTopRightRadius: 15 },
          left: { borderTopLeftRadius: 15 },
        }}
        containerStyle={{
          right: { borderTopRightRadius: 15 },
          left: { borderTopLeftRadius: 15 },
        }}
      />
    );
  };
于 2020-10-08T17:19:32.563 回答
-1

Use this code

  <Bubble
      {...props}          
         wrapperStyle={{
            right: {
              backgroundColor: '#EFE5D9',
              borderBottomRightRadius: 0,
              borderBottomLeftRadius: 15,
              borderTopRightRadius: 15,
              borderTopLeftRadius: 15,

            },
            left: {
              backgroundColor: '#F9F5F0',
              borderBottomRightRadius: 15,
              borderBottomLeftRadius: 15,
              borderTopRightRadius: 15,
              borderTopLeftRadius: 0,
            }
          }}
     />
于 2021-09-01T02:14:26.943 回答