本文共 2147 字，大约阅读时间需要 7 分钟。

前言

阴影效果在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,}
   复制代码

效果:(两端差别还是很大的)

iOS:

 

 

android:

 

 

具体可以查看:

选库

• 1.

该库是利用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 (		
   			
    				
     			
    		
   	)}复制代码

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

 

 

• 2.

该库iOS就是利用RN自带的shadow属性，android端使用了support库中的CardView组件，所以android端需要集成原生代码,用法如下:

import CardView from 'react-native-cardview'
             
    
                   Elevation 0          
    
   复制代码

注意:

• 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一个属性
	依赖	1.两端效果几乎一样 2.支持颜色等诸多属性	1.必须设置width和height
	该库android端是原生	1.相比方法一支持的属性较多	1.两端还是有差别(比方法1好点)

 

• 1.如果不需要两端效果完全一样，且不需要支持android5之前的安卓设备(很少了现在),可以直接使用RN自带的属性

• 2.如果需要两端效果完全一样或者需要设置阴影的颜色，则只能使用,缺点是必须设置固定的高度和宽度(该库依赖)

• 3.那就选择,效果比较接近，且均是iOS/android原生效果。

 

ps:如果需要react-native-cardview的ts定义文件，可以直接拷贝里面的ts文件，该pull虽然已合并，但是还未发布到npm中(截止2019/12/16)

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