react native 样式设置阴影？

container: {

  elevation: 10,  //  设置阴影角度，通过这个设置有无阴影（这个是最重要的，决定有没有阴影）

  shadowColor: 'black',  //  阴影颜色

  shadowOffset: { width: 0, height: 0 },  // 阴影偏移

  shadowOpacity: 1,  // 阴影不透明度

  shadowRadius: 10,  //  圆角

}

由于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解决

<View style={{ height: dp(2), backgroundColor: '#efefef' }} />

问题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 替换左右边框

reactnative页面设置黑白色设置步骤。

1、下面定义具体的约束，放在StatusBarShape里面。

2、接下来设置一些如果调用的时候没设置的默认值。

3、这里在自定义的导航栏中加入状态栏的设置也就是statusBar那一部分，statusBar就是上面定义好的，这边设置参数传递过去。

---