Layout with Flexbox

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

您通常使用的组合flexDirection，alignItems以及justifyContent实现正确的布局。

Flexbox在React Native中的工作方式与在Web上的CSS中的工作方式相同，只有少数例外。默认值是不同的，与flexDirection默认为column代替row，并且flex参数仅支持单个号码。

Flex Direction

添加flexDirection到组件将style确定其布局的主轴。子元素们应该水平（row）还是垂直（column）？默认是column。

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

export default class FlexDirectionBasics extends Component {
  render() {
    return (
      // Try setting `flexDirection` to `column`.
      <View style={{flex: 1, flexDirection: 'row'}}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
};

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => FlexDirectionBasics);

证明内容

添加justifyContent到组件的样式可确定子轴沿主轴的分布。儿童应该在开始，中间，结束时分发还是均匀分发？可用的选项有，，，，和。flex-startcenterflex-endspace-aroundspace-between

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

export default class JustifyContentBasics extends Component {
  render() {
    return (
      // Try setting `justifyContent` to `center`.
      // Try setting `flexDirection` to `row`.
      <View style={{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'space-between',
      }}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
};

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => JustifyContentBasics);

对齐项目

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

为了stretch产生效果，孩子们不能在副轴上有固定的尺寸。在下面的例子中，alignItems: stretch直到width: 50从子项中移除，设置才会执行任何操作。

import React, { Component } from 'react';
import { AppRegistry, 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`.
      <View style={{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
      }}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
};

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => AlignItemsBasics);

越来越深

我们已经介绍了基本知识，但还有许多其他样式可能需要布局。这里记录了控制布局的道具的完整列表。

我们正在接近能够建立一个真正的应用程序。我们仍然缺少的一件事是获取用户输入的一种方式，因此让我们继续学习如何使用TextInput组件处理文本输入。

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2019-06-27