组件可以使用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`.
<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>
);
}
};
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`.
<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>
);
}
};
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`.
<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>
);
}
};
image.png
