React Native之StyleSheet样式表
发布时间:2020-12-15 07:35:20 所属栏目:百科 来源:网络整理
导读:概述 在React Native中,StyleSheet是实现了类似Web中CSS样式表的功能。最简单的使用如下,先定一个StyleSheet的样式表,然后在View中引用样式。 var styles = StyleSheet. create ({ container: { borderRadius: 4 ,borderWidth: 0.5 ,borderColor: '#d6d7d
概述在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样式表的优点注意如下:
从性能角度来分析: StyleSheet使用调用方法:create(obj:{[key:string]:any}) static 静态方法 通过给定的对象进行常见一个StyleSheet样式 属性
{ borderBottomColor: '#bbb',borderBottomWidth: StyleSheet.hairlineWidth }
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' }
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |