官网中明确表示在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 (
<BoxShadow setting={boxShadow}>
...需要在外部边缘添加阴影的布局
</BoxShadow>
)
}
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
网友评论