React Native 之 Layout with Flexbox

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

您通常使用flexDirection、alignItems,justifyContent实现正确的布局。

Flexbox在RN工作与CSS在web工作方式相同,有少数例外。默认值是不同的,与flexDirection影响列而不是行,alignItems影响伸展而不是flex-start,flex参数仅支持一个数字。

Flex Direction

向组件的style添加flexDirection决定了其布局的主要轴。决定孩子们应该组织水平(行)或垂直(列)?默认的列。

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

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>
);
}
};

AppRegistry.registerComponent('AwesomeProject', () => FlexDirectionBasics);

Justify Content

向组件的style添加justifyContent、决定了孩子沿着主要的轴的分布。孩子应该分布在开始,中心,最后,还是均匀间隔? 可选值 flex-start, center, flex-end, space-around, and space-between。

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

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>
);
}
};

AppRegistry.registerComponent('AwesomeProject', () => JustifyContentBasics);

Align Items

向组件的style添加 alignItems、决定了孩子沿着二级轴的对齐(如果主轴是行,然后第二是列,反之亦然)。孩子在起始,中心,最后,还是拉伸来填补?可选值 flex-start, center, flex-end, and stretch。

拉伸（stretch）产生影响,孩子必须沿着列没有一个固定的dimension。在下面的例子中,设置alignItems:stretch、直到宽度:50 从孩子中移除。

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

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>
);
}
};

AppRegistry.registerComponent('AwesomeProject', () => AlignItemsBasics);

我们已经介绍了基础知识,但是还有很多其他款式你需要布局。

我们接近能够构建一个真实的应用程序中。我们仍然缺少的一件事是获取用户输入,让我们继续学习如何处理输入文本 与 文本输入组件。

关注公众号：

&nbs
4000
p;


更多精彩文章等你来！！！

[1]:参考文献 http://facebook.github.io/react-native/docs/flexbox.html