【RN】陰影react-native-shadow

一、為什么使用這個react-native-shadow插件呢？

　　RN提供的陰影僅支持IOS，又這個react-native-shadow插件適用於ios和android，所以在開發過程中遇到陰影問題需要借助第三方的插件。

二、怎么使用

　　第一步：$ yarn add react-native-shadow

　　

　　第二步：$ yarn add react-native-svg@xxx

　　備注：react-native-svg選擇什么版本安裝，需要根據你項目的react版本和react-native版本；

　　

　　第三步： $ react-native link react-native-svg

　　或$ react-native link

 

　　第四步：在需要的頁面中

import {BoxShadow} from 'react-native-shadow'

render() {

        const shadowOpt = {

            width:315, //包裹的子內容多寬這里必須多寬

            height:44,//同上

            color:"#000",//陰影顏色

            border:4,//陰影寬度

            radius:22,//包裹的子元素圓角多少這里必須是多少

            opacity:0.1,//透明度

            x:0,

            y:0,

            style:{marginVertical:5}

        }

}

<BoxShadow setting={shadowOpt}>

         <View style={[styles.userInput, styles.userName]}>

            <Text></Text>

         </View>

</BoxShadow>

 

 

width：您必須將值設置為與子組件相同

height：與上述相同

color：陰影的顏色，它現在不支持rgba，你可以使用不透明度

border：陰影的寬度，不能小於0

radius：與chileElement的“borderRadius”相同的值

opacity：陰影的不透明度

x：陰影的offsetX

y：陰影的偏移量

style：要添加到包裝器框的樣式

　　

缺點：需要設置陰影的內容的高度和寬度是必須有確定的值