React Native之StyleSheet样式表
React Native之StyleSheet样式表
xiangzhihong
发布于 2018-01-26 15:12:33
发布于 2018-01-26 15:12:33
概述
在React Native中，StyleSheet是实现了类似Web中CSS样式表的功能。最简单的使用如下，先定一个StyleSheet的样式表，然后在View中引用样式。
var styles = StyleSheet.create({
container: {
borderRadius: 4,
borderWidth: 0.5,
borderColor: '#d6d7da',
},
title: {
fontSize: 19,
fontWeight: 'bold',
},
activeTitle: {
color: 'red',
},
});view中引用：
<View style={styles.container}>
<Text style={[styles.title, this.props.isActive && styles.activeTitle]} />
</View>StyleSheet样式表的优点
采用StyleSheet样式表的优点注意如下： 从代码质量角度来分析:
- 从render渲染方法中移除了styles样式相关代码，这样可以使代码更加容易阅读
- 通过对不同样式命名，正好也是对render方法中的组件的一种标志
- 这样的写法做到了业务和样式的分离，为后面分层开发打下了基础
从性能角度来分析:
- 通过StyleSheet，我们可以通过标志的样式ID来引用，而不是每次都要创建一个新的Style对象
- 该允许样式通过桥接在原生代码和JavaScript中传递一次，后面全部通过该id进行引用(不过现在该功能还没有实现)
StyleSheet使用
调用方法：
create(obj:{[key:string]:any}) static 静态方法 通过给定的对象进行常见一个StyleSheet样式
属性
- .hairlineWidth:CallExpression
{
borderBottomColor: '#bbb',
borderBottomWidth: StyleSheet.hairlineWidth
}2. flatten: CallExpression 使用异常。
var styles = StyleSheet.create({
listItem: {
flex: 1, fontSize: 16, color: 'white' }, selectedListItem: { color: 'green' } });
StyleSheet.flatten([styles.listItem, styles.selectedListItem])
// returns { flex: 1, fontSize: 16, color: 'green' }本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2016/10/18，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录