ReactNative中设置自定义样式类

总觉一下常用的2种reactnative中设置样式的方法:
第一种

<Text style={{opacity:0.5}}></Text>

这种方式可是直接设置样式,样式均采用大驼峰命名,宽高边框等都是直接写值,不带单位,因为这里不是采用px。

如果要使用自定义样式类的话

第二种

import {Text,View,StyleSheet} from 'react-native';
 
export default class Demo04Component
extends Component{

    render(){
        return <View>
            <Text style={myStyle.myText}>1111</Text>
            <Text style={[myStyle.myText,myStyle.myText1]}>2222</Text>
            <Text style={myStyle.myText}>3333</Text>
        </View>
    }
}

var myStyle = StyleSheet.create({
    myText:{
        color:'red',
        fontSize:40,
        backgroundColor:'blue'
    },
    myText1:{
        color:'yellow'
    }
})

首先要从react-native中引入StyleSheet,然后通过StyleSheet中的create方法来完成自定义样式类,之后再设置一个变量来接受该方法的返回值,再在标签中通过花括号来使用。当使用多个样式类时,将所有的类名放入数组中进行引用即可。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值