React Native中文本圆角边框设置无效，如何解决？

直接给Text组件设置borderRadius在React Native里经常会出现不生效的情况，核心原因是Text组件的渲染逻辑和View不同，同时设置背景色与圆角时无法正确渲染。你可以把样式转移到外层的View容器上，让Text只负责文本显示：

修改后的代码：

<View style={styles.TextContainerStyle}>
   <Text style={styles.TextComponentStyle}>Account</Text>
</View> 

对应的样式表：

TextContainerStyle: {
    borderRadius: 5,
    borderColor: '#DADEE8',
    borderWidth: 0.5,
    backgroundColor: '#DADEE8',
    padding: 2,
    margin: 10
  },
TextComponentStyle: {
    color: 'black',
    fontSize: 16,
}

把容器View作为样式承载元素，Text仅处理文本相关样式，就能保证圆角边框正常显示。

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