React Native之阴影效果

前言

阴影效果在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:

image

android:

image

具体可以查看: https://stackoverflow.com/questions/41320131/how-to-set-shadows-in-react-native-for-android

选库

• 1.react-native-shadow

该库是利用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对于自适应高度的布局就很麻烦了，必须设置固定高度，我只是想加个阴影，还让我算高度

image

• 2.react-native-cardview

该库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:

image

android:

image

嗯，还是有点不一样，不过比使用属性的方式好点了

结论

|名称|原生依赖库|优点|缺点|
|--|--|--|--|--|
|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)