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属性足以实现常用的布局排版了,更多就不列举了。可以尝试使用开发工具的代码提示查看更多或者是直接进入模块源码内查看。

Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐