RN开发系列＜5＞--UI布局

1、UI布局

1. 一个好的程序，给用户第一印象不是功能多棒，性能多好，而是“颜值”
2. 就好比你找对象，往往第一被对方吸引的是颜值
3. 所以UI布局学好了，就更加容易获得用户的青睐

2、相关属性

• 感慨：英文不是很好，学起来还是比较费力的，根据翻译，对属性都给了中文解释，更容易理解和记忆。

1. flexDirection：

单词flex的意思: 活动

flexDirection: 活动方向，默认为列
可以写的值为： ‘row’ , ‘column’

import React from 'react';
import {
    Button,
    StyleSheet,
    SafeAreaView,
    View,
    FlatList,
    Dimensions,
    Text
} from 'react-native';

const screen = Dimensions.get('window');

const smallView = (name) => {
    return(
        <View style = {styles.smallViewStyle}>
            <Text>{name}</Text>
        </View>
    )
}

const myLayout = () => {
    return(
        <View style = {styles.testAlignContent}>
            {smallView("第一个")}
            {smallView("第二个")}
            {smallView("第三个")}
        </View>
    )
}
export default myLayout;

const styles = StyleSheet.create({
    testAlignContent: {
        flexDirection: 'row',
        
        margin: 30,
        backgroundColor: '#f5f5f5',
        borderWidth: 2,
        borderRadius: 10,
        height: 300,
    },
    smallViewStyle: {
        backgroundColor: 'green',
        borderWidth: 2,
        borderColor: 'blue',
        height: 40,
        width: 80
    },
  
})

注意：设置 flexDirection: ‘row’,效果如下

注意：设置 flexDirection: ‘column’, 或者不设置这个字段，效果如下

2. justifyContent：

(1)justify：为…辩解(或辩护)
(2)那么作为编程角度，justifyContent我们可以理解为：给当前内容进行描述。
(3)能够请得起律师辩护，那就是主人了。当flexDirection是row的时候，那么主轴就是row;反之，就是column

3. alignItems：

(1)一般来说，经常会这两个属性一起用到，相对justifContent主人来说，alignItems就是仆人了
(2)所以说，当justifyContent修饰的row,那么alignItems修饰的就是column；
(3)当justifyContent修饰的column,那么alignItems修饰的就是row；

justifyContent 可以选择的值：
flex-start’, ‘flex-end’, ‘center’, :这3个很容易理解了
’space-between’, :除了两边，中间的距离均匀
’space-around’,：中间间距都为D，但是两边间距为D/2
’space-evenly’: 包括两边，所有间距均匀

alignItems可以选择的值：
‘flex-start’, ‘flex-end’, ‘center’,
‘stretch’, :拉伸填充（前提是不能设置死对应的固定长度，否则无效）
‘baseline’：基准线

• 当设置alignItems: 'stretch', // 侧轴 // 这里设置为拉伸,不设置高度

testAlignContent: {
        flexDirection: 'row',
        justifyContent: 'space-between',  // 主轴
        alignItems: 'stretch', // 侧轴   // 这里设置为拉伸

        margin: 30,
        backgroundColor: '#f5f5f5',
        borderWidth: 2,
        borderRadius: 10,
        height: 300,
    },
    smallViewStyle: {
        backgroundColor: 'green',
        borderWidth: 2,
        borderColor: 'blue',
        // height: 40,  // 高度去了
        width: 80,
        marginTop: 0 // 距离父控件顶部为0
    },

效果如下：

• 当设置alignItems: 'baseline', // 侧轴,
• marginTop: 20 // 距离父控件顶部为20，效果如下：
• 说明：子控件的高度是被Text撑起来的高度，因为这里把子控件的高度取消了
• 
• 到此，我们可以布局一部分UI了。

4.alignContent，alignSelf

(1)alignContent 和 alignItems 也是容易混淆的概念
(2)那么在justifyContent、alignContent、alignItems、alignSelf这几个怎么区分呢？
(3)如下描述：
justifyContent:权力最大，想象成主人，统管全局
alignContent：主人的管家，只能管理所有的仆人，只会对多行仆人去管，一行仆人懒得去管理，官架子比较大哈！
alignItems：复数形式，小组长，只能管理一行。
alignSelf: 小喽啰，只能管理自己，管理自己相对父控件的侧轴位置。胆战心惊的小喽啰，父控件的主轴是row的时候，自己只能控制在column的位置。不敢在主人的眼皮底下有任何小动作。瑟瑟发抖的小喽啰。可怜，惨！（一般情况下，所有控件默认的主轴都column）

import React from 'react';
import {
    Button,
    StyleSheet,
    SafeAreaView,
    View,
    FlatList,
    Dimensions,
    Text
} from 'react-native';

const screen = Dimensions.get('window');

const smallView = (name) => {
    /* 
    <Text style = {{alignSelf: 'center'}}>{name}</Text> 
    瑟瑟发抖的小喽啰，控制自己在父控件的次轴row方向居中
    */
    return(
        <View style = {styles.smallViewStyle}>
            <Text style = {{alignSelf: 'center'}}>{name}</Text> 
        </View>
    )
}

const myLayout = () => {
    return(

        <View style = {styles.testAlignContent}>
            {smallView("第一个")}
            {smallView("第二个")}
            {smallView("第三个")}
            {smallView("第一个")}
            {smallView("第二个")}
            {smallView("第三个")}
            {smallView("第一个")}
            {smallView("第二个")}
            {smallView("第三个")}
            {smallView("第一个")}
            {smallView("第二个")}
            {smallView("第三个")}
        </View>
    )
}
export default myLayout;

const styles = StyleSheet.create({
    testAlignContent: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        alignContent: 'flex-start',  // 大管家：官架子比较大，单行不管，多行才管 
        justifyContent: 'space-between',  // 主人：控制 主轴的方向
        alignItems: 'baseline', // 侧轴   // 小组长：权力有限，单行有效，多行无效
        alignSelf: 'center',  // 人外有人，相对自己的父控件，自己也是小喽啰，只能控制自己在父控件的次轴方向：居中
        backgroundColor: '#f5f5f5',
        borderWidth: 2,
        borderRadius: 10,
        height: 400,
        width: 200,
    },
    smallViewStyle: {
        backgroundColor: 'green',
        borderWidth: 2,
        borderColor: 'blue',
        height: 40,
        width: 80,
        marginTop: 20,
        justifyContent:'center' // 控制smallView的主轴column方向居中
    },
    
})

效果图：

5、margin、padding

• 控制顺序，从上开始，上、右、下、左
  即：从上面开始，顺时针转动方向

1. margin 对外的距离设置
2. padding 对内的距离设置