版权声明:本文为博主原创文章,未经博主允许不得转载。 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,以确保只有样式被传递了。
以后补充例子