关注我们

React Native - Layout&Flexbox

React Native Flexbox是一种算法，用于指定组件子代的布局。它在不同的屏幕尺寸上提供了一致的布局。

Flexbox属性

Flexbox提供了三个主要属性来实现所需的布局。这些属性是:flexDirection，justifyContent和alignItems。

Property	Values	Description
flexDirection	'column', 'row'	用于垂直或水平对齐其元素。
justifyContent	'center', 'flex-start', 'flex-end', 'space-around', 'space-between'	用于在容器内分配元素。
alignItems	'center', 'flex-start', 'flex-end', 'stretched'	用于沿辅助轴在容器内部分配元素(与flexDirection相反)。

Flexbox方向

flexDirection在其布局的主轴上将样式添加到组件。它具有一个属性行和列，分别用于水平和垂直地组织子级。默认的flexDirection是一列。

复制代码

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

export default class FlexDirectionBasics extends Component {
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.powderblue} />
                <View style={styles.skyblue} />
                <View style={styles.steelblue} />
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container:{
        flex: 1,
        flexDirection: 'row',// 水平设置元素，列。
    },
    powderblue:{
        width: 60,
        height: 60,
        backgroundColor: 'powderblue',
    },
    skyblue:{
        width: 60,
        height: 60,
        backgroundColor: 'skyblue',
    },
    steelblue:{
        width: 60,
        height: 60,
        backgroundColor: 'steelblue',
    }
})

输出

Flexbox分布

justifyContent确定子组件沿主轴的分布。子组件在起点(start)，终点(end(，中心(center)或空间均匀分布。

复制代码

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

export default class JustifyContentBasics extends Component {
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.powderblue} />
                <View style={styles.skyblue} />
                <View style={styles.steelblue} />
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container:{
        flex: 1,
        flexDirection: 'column',//水平设置元素`。
        justifyContent: 'center',

    },
    powderblue:{
        width: 60,
        height: 60,
        backgroundColor: 'powderblue'
    },
    skyblue:{
        width: 60,
        height: 60,
        backgroundColor: 'skyblue',
    },
    steelblue:{
        width: 60,
        height: 60,
        backgroundColor: 'steelblue',
    }
})

输出

Flexbox对齐

alignItems确定子组件沿辅助轴的对齐方式。如果主轴是列(column)，则辅助是行(row)，而主轴是行(row)，则辅助是列(column)。使用alignItems可以使子项在开始(start)，结束(end)，居中(center)或拉伸(stretched)时对齐。

复制代码

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

export default class AlignItemsBasics extends Component {
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.powderblue} />
                <View style={styles.skyblue} />
                <View style={styles.steelblue} />
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container:{
        flex: 1,
        flexDirection: 'column',//水平设置元素`。
        justifyContent: 'center',
        alignItems: 'stretch',
    },
    powderblue:{
        width: 60,
        height: 60,
        backgroundColor: 'powderblue'
    },
    skyblue:{
        width: 60,
        height: 60,
        backgroundColor: 'skyblue',
    },
    steelblue:{
        /*width: 60,*/
        height: 60,
        backgroundColor: 'steelblue',
    }
})