react-native布局样式stylesheet使用(九)

react-native布局样式stylesheet样式属性支持大部分的css3.0样式，主要通过Stylesheet模块实现。

导入：

import { StyleSheet } from 'react-native'

定义： 

const styles = StyleSheet. create({
    stylename1:{},
    stylename2:{}
})

使用： 

1. <Text style={ styles.stylename1 }></Text>
2. <Text style={ [styles.stylename1] }></Text>
3. <Text style={ [styles.stylename1,styles.stylename2] }></Text>
4. <Text style={ [styles.stylename1,{ fontSize:20 }] }></Text>
5. <Text style={ { fontSize:20 } }></Text>

常见的样式属性：react-native中的元素大致包含两类常用元素---布局元素<View>，文本元素<Text>

View:{
    backgroundColor:'',
    borderCorlor:'',
    borderStyle:'',
    borderWidth:'',
    padding:'',
    paddingVertical:''
    paddingHorizontal:'',
    opacity:'',
    borderRadius:'',
    margin:'',
    .....
    display:'flex',
    alignItems:'',
    justifyContent:''
   ....
}

Text:{
    fontSize;'',
    color:'',
    fontFamily:'',
    lineHeight:'',
}

https://reactnative.cn/docs/0.44/text.html

layout:{
    position:'',
    left:'',
    top:'',
    right:'',
    bottom:'',
    zIndex:''
    ....
    <View ....>
}

以上的react-native StyleSheet属性足以实现常用的布局排版了，更多就不列举了。可以尝试使用开发工具的代码提示查看更多或者是直接进入模块源码内查看。