ReactNative学习笔记（五）样式&高度宽度&Flexbo

样式

• 所有核心组件都接受style属性，建议使用StyleSheet.create来集中定义组件的样式；
• style中可以传入单一的样式，也可以传入样式数组，与css中的规则一样，同一样式对象 处于后面的样式优先级更高 会覆盖前面的样式；
• 样式名基本上遵循了web上的css的命名，但按照JS的语法要求使用了驼峰命名，如css中的background-color 改为backgroundColor；

import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';
const styles = StyleSheet.create({
    bigBlue:{
        color:'blue',
        fontWeight:"700",
        fontSize:60,
    },
    red:{
        color:"#f60",
        fontSize:30,
    }
});
export default class BlinkApp extends Component {
    render(){
        return (
            <View>
                <Text style={styles.bigBlue}>just blue</Text>
                <Text style={[styles.bigBlue, styles.red]}>blue then red</Text>
                <Text style={[styles.red, styles.bigBlue]}>red then blue</Text>
            </View>
        );
    }
}

颜色、字号的简单样式

高度与宽度

const styles = StyleSheet.create({
    textAlignCenter:{
        alignItems:'center'
    },
    greyBackground:{
        backgroundColor: '#f3F3F3'
    },
    greenBackground:{
        backgroundColor: '#00e789',
    },
    sHeight100:{
        height:100, // 指定宽高
    }

});

<View style={{flex:1}}> // 弹性宽高， 方向的指定与css中一致 flexDirection:column|row
  <View style={[{flex:1,styles.textAlignCenter, styles.greyBackground}]}</View>
  <View style={[styles.sHeight100, styles.textAlignCenter, styles.greenBackground}]}</View>
</View>

使用Flexbox布局

• flexDirection —— Flex Direction column(default)|row
  决定布局的主轴是垂直方向（默认垂直方向）还是水平方向
• alignItems —— Layout Direction stretch(default) | center| flex-start | flex-end | baseline
  定义flex子项在flex容器的侧轴（与主轴方向垂直，对RN来说是水平方向）方向上的对齐方式
• justifyContent—— Justify Content flext-start | flext-end | center |space-between | space-around | space-evenly
  用于设置或检索弹性盒子元素在主轴方向（对RN来说是垂直方向）上的对齐方式。

render(){
        return (
            <View style={{flex:1, flexDirection:'column'}}>
                <Text style={{height:30}}>flex-start↓</Text>
                <View style={{flex:1, flexDirection:'row', justifyContent:'flex-start', textAlign:'center'}}>
                    <View style={{width:70, height:70,  backgroundColor:'coral'}}></View>
                    <View style={{width:70, height:70,  backgroundColor:'lightblue'}}></View>
                    <View style={{width:70, height:70,  backgroundColor:'khaki'}}></View>
                    <View style={{width:70, height:70,  backgroundColor:'pink'}}></View>
                </View>
                <Text style={{height:30}}>flex-end↓</Text>
                <View style={{flex:1, flexDirection:'row', justifyContent:'flex-end'}}>
                    <View style={{width:70, height:70,  backgroundColor:'coral'}}></View>
                    <View style={{width:70, height:70,  backgroundColor:'lightblue'}}></View>
                    <View style={{width:70, height:70,  backgroundColor:'khaki'}}></View>
                    <View style={{width:70, height:70,  backgroundColor:'pink'}}></View>
                </View>
                <Text style={{height:30}}>center↓</Text>
                <View style={{flex:1, flexDirection:'row', justifyContent:'center'}}>
                    <View style={{width:70, height:70,  backgroundColor:'coral'}}></View>
                    <View style={{width:70, height:70,  backgroundColor:'lightblue'}}></View>
                    <View style={{width:70, height:70,  backgroundColor:'khaki'}}></View>
                    <View style={{width:70, height:70,  backgroundColor:'pink'}}></View>
                </View>
                <Text style={{height:30}}>space-between↓</Text>
                <View style={{flex:1, flexDirection:'row', justifyContent:'space-between'}}>
                    <View style={{width:70, height:70,  backgroundColor:'coral'}}></View>
                    <View style={{width:70, height:70,  backgroundColor:'lightblue'}}></View>
                    <View style={{width:70, height:70,  backgroundColor:'khaki'}}></View>
                    <View style={{width:70, height:70,  backgroundColor:'pink'}}></View>
                </View>
                <Text style={{height:30}}>space-around↓</Text>
                <View style={{flex:1, flexDirection:'row', justifyContent:'space-around'}}>
                    <View style={{width:70, height:70,  backgroundColor:'coral'}}></View>
                    <View style={{width:70, height:70,  backgroundColor:'lightblue'}}></View>
                    <View style={{width:70, height:70,  backgroundColor:'khaki'}}></View>
                    <View style={{width:70, height:70,  backgroundColor:'pink'}}></View>
                </View>
            </View>
        );
    }

justifyContent效果图