ReactNative ios设备 Text圆角不显示

最新推荐文章于 2024-08-30 19:52:33 发布

原创最新推荐文章于 2024-08-30 19:52:33 发布 · 5.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#ReactNative #Text圆角

react-native 专栏收录该内容

2 篇文章

订阅专栏

在ReactNative开发中，遇到Text组件在iOS设备上无法显示圆角的问题，安卓设备正常。原因在于iOS的Text组件不支持borderRadius属性。解决方法是将Text放在一个设置有圆角的View内，并将Text背景设为透明。

开发的时候需要画一个圆角的Text，代码如下：

<Text style={{  color: '#fff',
                fontSize: 12,
                padding: 10,
                backgroundColor: colors.orange,
                borderRadius: 5
              }}>圆角文字</Text>

运行在安卓设备时背景有圆角，但是在ios设备上没有圆角，背景依然显示为一个矩形。原因是ios中的Text组件不支持borderRadius这样的api。

解决办法：
在Text外层嵌套一个有圆角的View，并将Text的背景色设置为透明（#00000000）。在View中设置背景圆角：

 <View style={{borderRadius: 12, backgroundColor:colors.orange}}>
     <Text style={{color: '#fff',
                fontSize: 12,
                padding: 10,
                backgroundColor: colors.transparent
              }}>圆角文字</Text>
 </View>