React Native - 06 - Flexbox布局

组件可以使用flexbox算法指定其子级的布局。 Flexbox旨在为不同的屏幕尺寸提供一致的布局。

您通常会使用flexDirection，alignItems和justifyContent的组合来实现正确的布局。

除了一些例外情况，Flexbox在React Native中的工作方式与在Web上的CSS工作方式相同。默认值是不同的，flexDirection默认为列而不是行，而flex参数只支持单个数字。

Flex Direction

将flexDirection添加到组件的样式将确定其布局的主轴。子元素应该水平（行）还是垂直（列）组织？默认是列。

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

export default class FlexDirectionBasics extends Component {
    render() {
        return (
            // Try setting `flexDirection` to `column`.
            
                
                
                
            
        );
    }
};

row

image.png

column

image.png

Justify Content

将justifyContent添加到组件的样式可确定沿主轴的子元素分布。子元素是否应该在开始，中间，结束或分配均匀？可用的选项是flex-start，center，flex-end，space-around和space-between。

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

export default class JustifyContentBasics extends Component {
    render() {
        return (
            // Try setting `justifyContent` to `center`.
            // Try setting `flexDirection` to `row`.
            
                
                
                
            
        );
    }
};

image.png

Align Items

将alignItems添加到组件的样式将确定子轴沿着辅助轴的对齐方式（如果主轴是行，则辅助是列，反之亦然）。儿童是否应该在开始，中间，结束或延伸填补？可用的选项是flex-start，center，flex-end和stretch。

为了有效地拉伸，子元素的副轴不能有固定的尺寸。在以下示例中，设置alignItems：stretch将不执行任何操作，直到宽度：50从子项中移除。

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

export default class AlignItemsBasics extends Component {
    render() {
        return (
            // Try setting `alignItems` to 'flex-start'
            // Try setting `justifyContent` to `flex-end`.
            // Try setting `flexDirection` to `row`.
            
                
                
                
            
        );
    }
};

image.png