React Native(RN)样式兼容问题汇总

由于Android机在RN的开发测试中的方便性,会先利用Android机进行RN的静态界面样式开发,但这些静态界面在IOS设备上会出现一些样式问题。同时,打包后发布的版本与打包前版本样式上也会有些差错,现总结主要问题如下:

问题1:IOS上文本显示不全
原因:给文本设置了padding或者margin等属性
解决方法:不要给文本设置任何的布局属性,所有的布局属性如flex, padding, margin等都由外层的View实现。

问题2: 图片上的文本在IOS上显示为一个白色框
解决方法: 图片上的文本外层View需要设置背景透明
backgroundColor: 'transparent'

问题3: 打包后图片显示不出来或者图片显示尺寸有误
原因:图片使用了中文命名,会导致打包后乱码,找不到图片。而图片不设置宽高,则图片尺寸会有误。
解决方法:所有图片都使用英文命名,且引入的图片一定要设置宽高属性。

问题4: 设置的上边框在某些IOS设备(如iPhone SE)上显示为较大的间距,边框不可见
原因:RN中的borderTop相关属性在IOS上显示不正确
解决方法: 所有与borderTop相关的属性可利用View解决

问题5: RN的阴影属性支持IOS不支持Android怎么办?
解决方法:引入react-native-shadow-cards包,既可用于IOS,又可用于Android。
来自 https://www.npmjs.com/package/react-native-shadow-cards
可参考React Native阴影框效果实现

问题6: 多个横排View的左右边框设置在某些IOS设备上显示不正确
解决方法: 使用带相应背景色的View替换左右边框

你可能感兴趣的:(React Native(RN)样式兼容问题汇总)