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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值