RN提供的阴影仅支持IOS,所以,在开发遇到阴影问题需要借助第三方的插件
react-native-shadow
使用react-native-shadow和react-native-svg实现:
1. npm install react-native-shadow
2. npm install react-native-svg@XXX
备注:react-native-svg选择什么版本安装,需要根据你项目的react版本和react-native版本;
不知道自己的版本是多少的建议安装最新的版本,同时更新自己的react-native 版本
版本查看:https://github.com/react-native-community/react-native-svg
3. react-native link react-native-svg
4.使用:
import {BoxShadow} from 'react-native-shadow'
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:您必须将值设置为与子组件相同
- 身高:与上述相同
- 颜色:阴影的颜色,它现在不支持rgba,你可以使用不透明度
- border:阴影的宽度,不能小于0
- radius:与chileElement的“borderRadius”相同的值
- 不透明度:阴影的不透明度
- x:阴影的offsetX
- y:阴影的偏移量
- style:要添加到包装器框的样式
https://www.npmjs.com/package/react-native-shadow
中途可能会报错如下:
原因是依赖没有加入,需要手动加入
build.gradle下面
手动添加:
dependencies {
compile(project(':react-native-svg')) {
exclude group: "com.android.support", module: "appcompat-v7"
}
}
重新打包即可
如果还不行先清理以前的旧包
cd .\android\
.\gradlew clean
再打包
效果: