在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样式表的优点注意如下: 从代码质量角度来分析:
从性能角度来分析:
create(obj:{[key:string]:any}) static 静态方法 通过给定的对象进行常见一个StyleSheet样式
{
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' }