【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：要添加到包装器框的样式

　　

缺点：需要设置阴影的内容的高度和宽度是必须有确定的值