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 (
    <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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,593评论 25 709
  • 我的母校是山师附小。 我的母校十分美丽,特别是学校里的小花园,更是受到了众多同学们的喜爱。每天放学后,都会有同...
    济世万千阅读 399评论 0 1
  • “肥仔衣装店”开业了!肥仔一放学就喊着妈妈去他的店里逛逛。 说起这个肥仔还蛮有故事的。 肥仔刚刚出生净重九斤半。因...
    百合嫣阅读 1,081评论 11 7
  • 1. 好朋友小婷要跟老公离婚。 她和李先生结婚才一年多,婚礼上两人幸福的笑脸还清清楚楚地印在我的脑海中。自由恋爱、...
    匹诺曹JS阅读 3,312评论 10 37
  • hi,自己,清醒了么?开始吧?
    Madea阅读 224评论 0 0