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版本;

RN 实现阴影,解决Android阴影问题  react-native-shadow_圆角

不知道自己的版本是多少的建议安装最新的版本,同时更新自己的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

中途可能会报错如下:

 

 

 

 

RN 实现阴影,解决Android阴影问题  react-native-shadow_github_02

原因是依赖没有加入,需要手动加入

build.gradle下面

手动添加:

dependencies {
    compile(project(':react-native-svg')) {
        exclude group: "com.android.support", module: "appcompat-v7"
    }
    
}

重新打包即可

如果还不行先清理以前的旧包

cd .\android\

 .\gradlew clean

再打包

效果:

RN 实现阴影,解决Android阴影问题  react-native-shadow_android_03