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:

 

 

android:

 

 

具体可以查看: stackoverflow.com/questions/4…

选库

• 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>
	)
}

复制代码

通过上面的代码可知道，这个库最大的缺陷就是，必须要设置width和height，width还好说，但是height对于自适应高度的布局就很麻烦了，必须设置固定高度，我只是想加个阴影，还让我算高度

 

 

• 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>

复制代码

注意:

• 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)

作者：yz_
链接：https://juejin.im/post/5df715a16fb9a0160b637c8c
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。