美文网首页React Native学习react native
reactnative 在Android上添加阴影效果

reactnative 在Android上添加阴影效果

作者: oc123 | 来源:发表于2018-07-18 17:24 被阅读15次

官网中明确表示在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

相关文章

  • reactnative 在Android上添加阴影效果

    官网中明确表示在react native中阴影的样式属性shadow...都是只支持iOS的,并不支持Androi...

  • Android开发偷懒技巧之阴影

    在Android开发中我们会在设计稿中看到各种阴影效果,我们知道CardView可以添加阴影效果,不过可能并不是我...

  • iOS UIView添加阴影

    UIView添加四边阴影效果 UIView添加单边阴影效果

  • iOS UI三板斧圆角加阴影

    想必在日常的开发中大家都能遇到UI各种圆角加阴影的设计添加圆角效果: 添加阴影效果: 需要圆角+阴影效果则不能满足...

  • box-shadow(阴形)使用

    #01. box-shadow:属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果,并用逗号...

  • css3 阴影深入

    css阴影 简介 text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果。随着...

  • HTML5 给图形绘制阴影

    在 HTML5 中,我们除了上一节讲过的可以对图形设置平移、旋转、缩放,还可以给图形添加阴影效果。添加阴影的时候只...

  • css3阴影 box-shadow使用

    text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果。 文字阴影的结构是按照...

  • Android图像效果

    Android允许您通过在图像上添加不同类型的效果来操纵图像。您可以轻松应用图像处理技术在图像上添加某些类型的效果...

  • 2018-08-02 Android中实现阴影和图片圆角效果

    Android中实现阴影和图片圆角效果 这里要讲的是两个github上两个开源的轮子 圆角效果的依赖 阴影效果的依...

网友评论

    本文标题:reactnative 在Android上添加阴影效果

    本文链接:https://www.haomeiwen.com/subject/oiqapftx.html