因为UI设计的图中需要对边框设置阴影，然而找了一下RN的官方文档，只是适用于IOS。所以在完成UI大大的设计稿的征途中进行了一系列的探索。
RN官网阴影样式属性（IOS）
首先介绍一下官网给出的样式属性（shadowColor，shadowOffset，shadowOpacity，shadowRadius），shadowColor表示设置阴影的颜色，shadowOffset: {width: number,height: number}表示设置阴影的偏移量，shadowOpacity表示设置阴影的不透明度（乘以颜色的alpha分量），shadowRadius表示设置阴影模糊半径。这些属性都只能在IOS上才会有效果。
elevation
elevation可以给android设置黑色的阴影，通过number值来设置他的模糊半径。但是elevation不能设置颜色，不能设置透明度，不能设置偏移量，所以对于简单的阴影设计可以满足需求，如果想满足web端的阴影效果，那么只能老老实实的找其他的办法了。
ImageBackground
一开始在否定了elevation后我用的是ImageBackground进行代替的，他实质上和web端设置背景图一样，这样我们可以先切好背景图，然后平铺我们的View里面。和Image不同的是Image需要设置层级关系，而ImageBackground只需要将View包裹进行就可以了，其使用方式为：
``` jsx
return (
<ImageBackground source={...} style={{width: '100%', height: '100%'}}>
<Text>Inside</Text>
</ImageBackground>
);
```
source的用法和Image一样，这样就可以通过使用图片的方式去展示阴影。
react-native-cardview
在使用了ImageBackground后我又想找一下有没有不设置背景图的方式，然后再github上找到了这个组件react-native-cardview，这个组件能够兼容android和ios，而且可以设置偏移量和模糊半径，但是透明度方面不能设置，所以只能满足那些不需要设置透明度的需求，兼容方面没问题。插件的属性主要有：
- cardElevation (Android/iOS) 主要设置elevation的值，当值设置比较高时会对性能有影响
- cardMaxElevation (Android) 让pre-lollipop设备支持阴影，仅支持android（pre-lollipop不清楚是什么设备）
- cornerRadius (Android/iOS) 设置card的圆角
- useCompatPadding (Android) 添加填充来绘制阴影，仅支持安卓
- cornerOverlap (Android) cardView不会为圆角剪切卡的边界。相反，它向内容添加填充，这样它就不会与圆角重叠。您可以通过将此字段设置为false来禁用此行为。
react-native-shadow
网上有一些资料上面说react-native-shadow可以实现阴影，但需要react-native-svg配合来实现，我在试验的过程中一直没有得到阴影效果，所以后面我就放弃了这个组件。如果有大佬做出来了，希望能不吝赐教。
最后，我总结一下我这些天被阴影虐的感受，那就是如果可以不用阴影，我会尽量和UI商量少用，因为做出来的效果真的有点惨不忍睹。如果硬是需要的话，那么我会直接通过ImageBackground的方式去做，这样做出来的效果还原度最高。
