(
问渠那得清如许，为有源头活水来。双手奉上RN官网)
Flexbox: 用于在不同的屏幕上显示相同的布局. 需要使用flexDirection, alignItems, 和 justifyContent 相互组合达到目标布局效果
- flexDirection(默认column),确定子组件的布局主轴向.
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={{flex: 1}}> {/* 默认column */}
<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);
- justifyContent:(默认flex-start) 决定子组件沿着主布局轴向如何分配. 可用的选项有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: 'flex-start', //从开始点紧密排列
// justifyContent: 'center', //整体居中排列
// justifyContent: 'flex-end', //末尾与结束点对齐
// justifyContent: 'space-around', //每个元素的外边距相等
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);
- alignItems: 在相对于主轴向而言的次级轴向(主轴向是column,那次级轴向为row;如果主row则次column)上子元素的分布,默认为stretch(但如果在次轴向上子元素指定了一个固定尺寸值,则此时默认表现为flex-start),可选值有flex-start, center, flex-end, 和 stretch.
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',
//flex-start, center, flex-end 与justifyContent中效果相同
//stretch为与父元素相同.但前提条件是子元素在次级轴向上没有指定一个确认的值
// alignItems: 'flex-end',
}}>
{/*这里没有指定确定的宽度,则宽度与父相同*/}
<View style={{ 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);
