前言
阴影效果在App中是一个很常见的需求，在css3中可有直接通过box-shadow属性实现，RN中的iOS端也可以通过下面类似的代码实现
//只支持iOS端
shadowColor: '#999', //设置阴影色
shadowOffset:{width:0,height:0}, //设置阴影偏移,该值会设置整个阴影的偏移，width可以看做x,height可以看做y,x向右为正，y向下为正
shadowOpacity: 1,
shadowRadius: 1.5, //设置阴影模糊半径,该值设置整个阴影的半径，默认的效果就是View的四周都有阴影
但是上面的代码不支持android，在android端可以通过elevation属性来实现
//该值只在android5.0(包含)以上的机型才支持
//无法指定阴影的颜色以及偏移，只能设置阴影的高度
//阴影效果主要在底部，其它三面也有一个层次感,跟ios四面阴影效果不一样
elevation:1.5,
但是两者在表现样式上，很大不同，如果不介意的话，可以直接合并两个平台的属性,在需要使用的地方引用即可:
viewShadow:{
//该属性只支持>=android 5.0
elevation:1.5,
shadowColor:gColors.color999,
shadowOffset:{width:0,height:0},
shadowOpacity: 1,
shadowRadius: 1.5,
}
<View style={[{},Styles.viewShadow]}>
</View>
效果:(两端差别还是很大的)
iOS:
android:
具体可以查看: https://stackoverflow.com/questions/41320131/how-to-set-shadows-in-react-native-for-android
选库
该库是利用svg库react-native-svg画出的阴影，所以两端的效果一致，用法如下:
const shadowOpt = {
width:100,
height:100,
color:"#000",
border:2,
radius:3,
opacity:0.2,
x:0,
y:3,
style:{marginVertical:5}
}
...
render = () => {
return (
<View>
<Shadow setting={shadowOpt}>
<View style={{width:100,height:100}}/>
</Shadow>
</View>
)
}
通过上面的代码可知道，这个库最大的缺陷就是，<span style="color:red;">必须要设置width和height</span>，width还好说，但是height对于自适应高度的布局就很麻烦了，必须设置固定高度，我只是想加个阴影，还让我算高度
该库iOS就是利用RN自带的shadow属性，android端使用了support库中的CardView组件，所以android端需要集成原生代码,用法如下:
import CardView from 'react-native-cardview'
<CardView
cardElevation={2}
cardMaxElevation={2}
cornerRadius={5}>
<Text>
Elevation 0
</Text>
</CardView>
<span style="color:red;">注意:</span>
- 1.最好将CardView设置一个背景值，否则将报很多下面的警告
YellowBox.js:71 (ADVICE) View #257 of type RCTView has a shadow set but cannot calculate shadow efficiently. Consider setting a background color to fix this, or apply the shadow to a more specific component.
- 2.如果需要圆角，设置
cornerRadius即可，不用设置子元素的borderRaduis
不用管width和height，完美，让我们看下的运行效果:
iOS:
android:
嗯，还是有点不一样，不过比使用属性的方式好点了
结论
|名称|原生依赖库|优点|缺点|
|--|--|--|--|--|
|RN自带属性|否|不用集成任何原生库|1.两端差别较大
2.不支持设置颜色
3.android端只支持elevation一个属性|
|react-native-shadow|依赖react-native-svg|1.两端效果几乎一样
2.支持颜色等诸多属性|1.必须设置width和height|
|react-native-cardview|该库android端是原生|1.相比方法一支持的属性较多|1.两端还是有差别(比方法1好点)
|
1.如果不需要两端效果完全一样，且不需要支持android5之前的安卓设备(很少了现在),可以直接使用RN自带的属性
2.如果需要两端效果完全一样或者需要设置阴影的颜色，则只能使用react-native-shadow,缺点是必须设置固定的高度和宽度(该库依赖react-native-svg)
3.那就选择react-native-cardview,效果比较接近，且均是iOS/android原生效果。
ps:如果需要react-native-cardview的ts定义文件，可以直接拷贝pull61里面的ts文件，该pull虽然已合并，但是还未发布到npm中(截止2019/12/16)
