reactnative 在Android上添加阴影效果

官网中明确表示在react native中阴影的样式属性shadow...都是只支持iOS的，并不支持Android。但是如果要在安卓上实现跟苹果一样的效果呢？除了用背景图这种方法(不推荐)，还能用react-native-shadow和react-native-svg框架来实现；

安装依赖react-native-shadow:

npm install react-native-shadow

安装react-native-svg

npm install react-native-svg@版本号

跟原生iOS与Android建立react-native-svg连接

react-native link react-native-svg

使用

render() {  return (          ...需要在外部边缘添加阴影的布局      )}const boxShadow = {  height: 49,  color: '#000',  border: 2,  radius: 3,  opacity: 0.2,  x: 0,  y: 3,  style: { marginVertical: 5 },}

也可以在设置ios阴影的地方添加如下代码，让安卓呈现层次效果(非阴影)：

elevation: 100,

注意：

1、SVG的版本与RN的版本相对应（必须的，不然没有效果哦~~~具体查看react-native-svg文档信息）：https://github.com/react-native-community/react-native-svg

2、react-native-shadow插件：https://www.npmjs.com/package/react-native-shadow

安装依赖react-native-shadow:

安装react-native-svg

跟原生iOS与Android建立react-native-svg连接

使用

也可以在设置ios阴影的地方添加如下代码，让安卓呈现层次效果(非阴影)：

更多相关文章

随机推荐