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,
</span><span class="pun">},</span><span class="pln">
powderblue</span><span class="pun">:{</span><span class="pln">
width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">60</span><span class="pun">,</span><span class="pln">
height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">60</span><span class="pun">,</span><span class="pln">
backgroundColor</span><span class="pun">:</span><span class="pln"> </span><span class="str">powderblue</span><span class="pln">
</span><span class="pun">},</span><span class="pln">
skyblue</span><span class="pun">:{</span><span class="pln">
width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">60</span><span class="pun">,</span><span class="pln">
height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">60</span><span class="pun">,</span><span class="pln">
backgroundColor</span><span class="pun">:</span><span class="pln"> </span><span class="str">skyblue</span><span class="pun">,</span><span class="pln">
</span><span class="pun">},</span><span class="pln">
steelblue</span><span class="pun">:{</span><span class="pln">
width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">60</span><span class="pun">,</span><span class="pln">
height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">60</span><span class="pun">,</span><span class="pln">
backgroundColor</span><span class="pun">:</span><span class="pln"> </span><span class="str">steelblue</span><span class="pun">,</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
})
输出
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, } })
输出
