前言
陰影效果在App中是一個(gè)很常見的需求，在css3中可有直接通過box-shadow屬性實(shí)現(xiàn)扯饶，RN中的iOS端也可以通過下面類似的代碼實(shí)現(xiàn)
//只支持iOS端
shadowColor: '#999', //設(shè)置陰影色
shadowOffset:{width:0,height:0}, //設(shè)置陰影偏移,該值會(huì)設(shè)置整個(gè)陰影的偏移曾我，width可以看做x,height可以看做y,x向右為正，y向下為正
shadowOpacity: 1,
shadowRadius: 1.5, //設(shè)置陰影模糊半徑,該值設(shè)置整個(gè)陰影的半徑，默認(rèn)的效果就是View的四周都有陰影
但是上面的代碼不支持android捧韵，在android端可以通過elevation屬性來實(shí)現(xiàn)
//該值只在android5.0(包含)以上的機(jī)型才支持
//無法指定陰影的顏色以及偏移叙淌，只能設(shè)置陰影的高度
//陰影效果主要在底部秤掌，其它三面也有一個(gè)層次感,跟ios四面陰影效果不一樣
elevation:1.5,
但是兩者在表現(xiàn)樣式上，很大不同鹰霍，如果不介意的話闻鉴，可以直接合并兩個(gè)平臺(tái)的屬性,在需要使用的地方引用即可:
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>
)
}
通過上面的代碼可知道孟岛，這個(gè)庫最大的缺陷就是，<span style="color:red;">必須要設(shè)置width和height</span>督勺，width還好說渠羞，但是height對(duì)于自適應(yīng)高度的布局就很麻煩了，必須設(shè)置固定高度智哀，我只是想加個(gè)陰影次询，還讓我算高度
該庫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設(shè)置一個(gè)背景值屯吊，否則將報(bào)很多下面的警告
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.如果需要圓角，設(shè)置
cornerRadius即可摹菠，不用設(shè)置子元素的borderRaduis
不用管width和height盒卸，完美，讓我們看下的運(yùn)行效果:
iOS:
android:
嗯次氨，還是有點(diǎn)不一樣蔽介，不過比使用屬性的方式好點(diǎn)了
結(jié)論
|名稱|原生依賴庫|優(yōu)點(diǎn)|缺點(diǎn)|
|--|--|--|--|--|
|RN自帶屬性|否|不用集成任何原生庫|1.兩端差別較大
2.不支持設(shè)置顏色
3.android端只支持elevation一個(gè)屬性|
|react-native-shadow|依賴react-native-svg|1.兩端效果幾乎一樣
2.支持顏色等諸多屬性|1.必須設(shè)置width和height|
|react-native-cardview|該庫android端是原生|1.相比方法一支持的屬性較多|1.兩端還是有差別(比方法1好點(diǎn))
|
1.如果不需要兩端效果完全一樣，且不需要支持android5之前的安卓設(shè)備(很少了現(xiàn)在),可以直接使用RN自帶的屬性
2.如果需要兩端效果完全一樣或者需要設(shè)置陰影的顏色煮寡，則只能使用react-native-shadow,缺點(diǎn)是必須設(shè)置固定的高度和寬度(該庫依賴react-native-svg)
3.那就選擇react-native-cardview,效果比較接近屉佳，且均是iOS/android原生效果。
ps:如果需要react-native-cardview的ts定義文件洲押，可以直接拷貝pull61里面的ts文件武花，該pull雖然已合并，但是還未發(fā)布到npm中(截止2019/12/16)
