RN 萌新布局篇,一步步了解布局

我是一名RN萌新,以前是做安卓开发的,各种布局都非常的熟练,公司突然说要我学RN,我这一下转不过弯,我布局都写不出来。然后慢慢跟着别人的文章,然后一个个属性慢慢去试,但是先入为主,安卓布局的方式已经根深蒂固,我只能写这个笔记给自己看,到时候不记得的时候可以来翻一下。以下的内容纯属笔记,如有错误请大家斧正,谢谢。


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

export default class HomeScreen extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <View style={myStyle.parent} >
                <Text style={myStyle.childFirst}>按钮1</Text>
                <Text style={myStyle.childSecond}>按钮2</Text>
                <Text style={myStyle.childThird}>按钮3</Text>
            </View>
        )
    };
}

const myStyle = StyleSheet.create({
    parent: {
        //flex 控制权重的,类似安卓里 LineaLayout 中的weight, 但是在这里有点不同,在RN当中,
        //这个是表示充满父容器。如果是根节点,那么就会充满整个屏幕。
        flex: 1,

        //flexDirection 子集标签排列方向: 
        //flexDirection?: "row" | "column" | "row-reverse" | "column-reverse";
        // row 是横向从左到右排列;column是竖向排从下到上列(系统默认);
        //row-reverse 横向从有到左排列; column-reverse"竖向从下到上排列;
        flexDirection:'row',

        //backgroundColor 控制背景色,也可以用  red、green之类的代替。
        backgroundColor : '#acacaf',
    },

    childFirst: {
        backgroundColor: 'red',

        //文字颜色 string 
        color: 'white',

        //文字大小 number
        fontSize: 14,

        //所占比重 number
        flex:2,

        //外边距  number
        margin: 5,

        //控件宽度 number
        width: 100,

        //控件高度  number
        height: 50,

        //控制文本内容所在的位置
        textAlign: 'center', //水平(X)居中
        textAlignVertical: 'center', //垂直(Y)居中

        //如果自己是父容器,控制子控件的位置,也是控制 居中(X,Y)的,具体哪个是哪个忘记了。
        // justifyContent: 'center', 
        // alignItems: 'center',

    },

    childSecond: {
        backgroundColor: 'green',
        color: 'white',
                //  ......  和childFirst 一样

    },

    childThird: {
        backgroundColor: 'yellow',
        color: '#000',
        //  ......  和childFirst 一样
    },
});

**上面的代码形成的是这么一个界面。由于根节点 flex: 1 ,所以根节点会充满这个屏幕, flexDirection:’row’,横向从左到右排列。第一和第二个按钮 flex: 2 ,第三个按钮flex: 1 ,就是前面两个按钮各占 2/5 ,第三个按钮 1/5 。 了解 flex 和 flexDirection 这两个属性之后,对于线性的布局就很快了。
这里再说下,自定义控件在使用的时候设置style没用,只有在定义的时候设置才有用。**

这里写图片描述

这里写图片描述
**上面的这种布局会形成这种样子的界面
justifyContent的布局样式和flexDirection有关,这里是flexDirection 是 row,是横向来的,如果是column就是竖向的,自己脑补想象竖着就好了。**

这里写图片描述

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页