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方法来完成自定义样式类,之后再设置一个变量来接受该方法的返回值,再在标签中通过花括号来使用。当使用多个样式类时,将所有的类名放入数组中进行引用即可。

你可能感兴趣的:(ReactJs,React-Native)