React Native中如何不为Text组件套View即可实现边框圆角效果

问题原因 #

React Native中嵌套在其他Text组件内部的子Text组件，默认仅支持文本相关样式，盒模型类属性（borderRadius、padding、margin等）不会生效，因为子Text会被识别为文本片段，走原生文本渲染逻辑，而非View的盒模型渲染逻辑。

当前实现效果：

期望实现效果：

解决方案 #

不需要修改现有嵌套结构，只需在需要加圆角的Text样式中新增overflow: 'hidden'属性，同时补充对应的内边距即可让borderRadius生效。

对应你代码中mentionMe样式的修改示例：

mentionMe: isMe =>
    isMe
        ? {
              color: Colors.white,
              backgroundColor: Colors.pink_05_b,
              // 新增以下3个属性即可实现圆角效果
              borderRadius: 4,
              paddingHorizontal: 3,
              paddingVertical: 1,
              overflow: 'hidden'
          }
        : {},

补充说明 #

• 可根据设计需求调整borderRadius圆角数值、paddingHorizontal水平内边距、paddingVertical垂直内边距的数值
• 该方案兼容iOS/Android双端，无需额外引入第三方依赖
• 如果遇到少数低版本RN不兼容的情况，可额外给该Text组件添加display: 'flex'属性即可

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