React Native之样式篇

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/yingzizizizizizzz/article/details/82426754

昨天会调试之后,今天迫不及待的就开始练习了。实现了一个电影列表,想让其样式变好看点,想要实现border:1px soild #ccc

不好意思,RN告诉你不能这么用,于是百度呀。。。

只能这样用:

1、边框类

borderWidth//边框宽度,单方向设置为borderBottomWidth,borderTopWidth,borderLeftWidth,borderRightWidth
borderColor//边框颜色,单方向设置为borderBottomColor等
borderStyle//边框样式,单方向设置为borderBottomStyle等
borderRadius//圆角半径,单角设置为borderTopLeftRadius等

2、shadow类

shadowColor//阴影颜色
shadowOffset//阴影偏移
shadowOpacity//阴影透明度
shadowRadius//阴影角度
elevation//高度,设置Z轴,可以产生立体效果

后来想实现一个边框的阴影,结果shadow类在android机上不管用。。。于是百度呀。。

参考文献:https://blog.csdn.net/SpicyBoiledFish/article/details/76079556

现在为止有三种方法,

  • 采用react-native-shadow和react-native-svg实现

       缺点:会牵扯到你的项目不能仅仅通过热更新来迭代版本;需要发app store大版本和安卓市场版本。

  •  利用背景图片当做阴影
  • elevation: 4  这个属性在android中是显示灰色的阴影,不能设置自己想要的颜色

样式的总结博客:

https://blog.csdn.net/sbsujjbcy/article/details/50017029

https://www.jianshu.com/p/2b4368569c03

3、组合样式:

<Text style={[styles.title,style.text]}>{item.title}</Text>

4、条件样式:

属性touching为true的话,后边的样式才能生效。

若&&前边也为样式,那么两个对象的属性相同的时候,RN会默认选择最后一个。

<View style={this.state.touching&&styles.highlight} />

5、样式传递:

为了让一个 call site 定制你的子组件的样式,你可以通过样式传递。使用 View.propTypes.style 和 Text.propTypes.style,以确保只有样式被传递了。

以后补充例子

猜你喜欢

转载自blog.csdn.net/yingzizizizizizzz/article/details/82426754