rn 样式

Love The Way You Lie 2021-07-24 19:32 697阅读 0赞

组件：如<View style={
       {对象样式键值对}}></View>
    
    react-native样式与原生区别:
    (1)子元素不能继承父元素样式,如父元素设置字体颜色,子元素不设置,子元素字体颜色无效
    (2)样式设置数值,不加引号和px单位
    (3)非数值样式,必须带'值'
    (4)设置百分比:width:'100%'
    
    
    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)该组件默认为弹性浮动,不需要设置display:flex
    	  (2)默认浮动方向flexDirection='column',而不是'row',colunm-reverse、row-reverse设置反向
    	  (3)flex='n' 来占据空间,子元素通过flex和flexGrow都能设置占比
    	  (4)当只有一个元素时,设置flex=1,默认占满父元素
    	  
    5、transform写法
    	transform: [{translateY:200},{...}],

代码示例:

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:{ 
    
        }
    })