rn 样式

组件：如<View style={{对象样式键值对}}></View>

react-native样式与原生区别:
(1)子元素不能继承父元素样式,如父元素设置字体颜色,子元素不设置,子元素字体颜色无效
(2)样式设置数值,不加引号和px单位
(3)非数值样式,必须带'值'


1、通过StyleSheet创建样式

	import {StyleSheet} from 'react-native'
	const xx=StyleSheet.create({
			x:{
				键值对
			}
	})
	style={xx.x}使用

2、在组件上直接写样式
	如<View style={{样式键值对,驼峰命名}}></View>

3、多个样式,其中相同属性,右边样式的优先级高于左边
	如<View style={[{样式对象1},{样式对象2}]}>

4、弹性布局与原生的区别
	<View></View> 
	
	  (1)该组件默认为浮动
	  (2)默认浮动方向flexDirection='column',而不是'row'
	  (3)flex='n' 来占据空间,子元素通过flex和flexGrow都能设置占比

代码示例:

import React,{Component} from 'react'
import {
    Text,
    View,
    StyleSheet
} from 'react-native'


export default class App extends Component{
    render(){
        return (

            <View style={{flex:1,flexDirection:'row',justifyContent:'space-between',alignItems:'center'}}>
                <View style={{flex:1,width:50,height:50, backgroundColor:'blue'}}></View>
                <View style={{flex:2,width:50,height:50,backgroundColor:'red'}}></View>
                <View style={{flex:1,width:50,height:50,backgroundColor:'orange'}}></View>



  		<View>
            <Text>jeff最帅</Text>
        </View> 
        <View style={{marginTop:8,padding:8,backgroundColor:'blue'}}>
            <Text style={{color:'pink'}}>jeff帅帅帅</Text>
        </View>
        <View style={{marginTop:8,padding:8,backgroundColor:'red'}}>
            <Text style={{color:'orange'}}>jeff the shuai</Text>
        </View>


        <View style={style.container}>
             {/*没有样式继承,每一个组件都要单独设置样式  */}
            <View style={[style.txt,{color:'red'}]}>
                <Text>jeff 帅</Text>
            </View>

            <View style={style.card}></View>

            <View style={{marginTop:8,marginBottom:8,height:300,backgroundColor:'pink'}}></View>

            {/* 合并多个样式,相同样式右边的优先级高 */}
            <View style={[style.card,{backgroundColor:'blue'}]}></View>

        </View>
        

      </View>
        )
    }
};

const style=StyleSheet.create({
    container:{
        flex:1,
        padding:8,
        backgroundColor:'#eeeeee'
    },
    card:{
        height:100,
        backgroundColor:'#ffffff'

    },
    txt:{

    }
})