欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

rn 样式

程序员文章站 2022-06-15 22:43:34
...
组件:如<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:{

    }
})