### FlexBox布局Demo
* * * * *
效果：
代码：
~~~
import React, { Component } from 'react';
import {
Text,
View,
StyleSheet,
ScrollView
} from 'react-native';
export default class FlexBoxDemo extends Component {
render(){
return (
<ScrollView>
<View style={styles.container}>
<View style={styles.wrapper}>
<Text>父容器横向布局</Text>
<View style={styles.flex_row}>
<Text style={styles.box}>1</Text>
<Text style={styles.box}>2</Text>
<Text style={styles.box}>3</Text>
<Text style={styles.box}>4</Text>
</View>
</View>
<View style={styles.wrapper}>
<Text>父容器横向布局 justifyContent:flex_end</Text>
<View style={[styles.flex_row,styles.justify_end]}>
<Text style={styles.box}>1</Text>
<Text style={styles.box}>2</Text>
<Text style={styles.box}>3</Text>
<Text style={styles.box}>4</Text>
</View>
</View>
<View style={styles.wrapper}>
<Text>父容器横向布局 justifyContent:center</Text>
<View style={[styles.flex_row,styles.justify_center]}>
<Text style={styles.box}>1</Text>
<Text style={styles.box}>2</Text>
<Text style={styles.box}>3</Text>
<Text style={styles.box}>4</Text>
</View>
</View>
<View style={styles.wrapper}>
<Text>父容器横向布局 justifyContent:space-between</Text>
<View style={[styles.flex_row,styles.justify_between]}>
<Text style={styles.box}>1</Text>
<Text style={styles.box}>2</Text>
<Text style={styles.box}>3</Text>
<Text style={styles.box}>4</Text>
</View>
</View>
<View style={styles.wrapper}>
<Text>父容器横向布局 justifyContent:space-around</Text>
<View style={[styles.flex_row,styles.justify_around]}>
<Text style={styles.box}>1</Text>
<Text style={styles.box}>2</Text>
<Text style={styles.box}>3</Text>
<Text style={styles.box}>4</Text>
</View>
</View>
<View style={styles.wrapper}>
<Text>父容器横向布局,alignItems:flex-end</Text>
<View style={[styles.flex_row,styles.align_end]}>
<Text style={styles.box}>1</Text>
<Text style={styles.box}>2</Text>
<Text style={styles.box}>3</Text>
<Text style={styles.box}>4</Text>
</View>
</View>
<View style={styles.wrapper}>
<Text>父容器横向布局,alignItems:center</Text>
<View style={[styles.flex_row,styles.align_center]}>
<Text style={styles.box}>1</Text>
<Text style={styles.box}>2</Text>
<Text style={styles.box}>3</Text>
<Text style={styles.box}>4</Text>
</View>
</View>
<View style={styles.wrapper}>
<Text>父容器横向布局,alignItems:stretch</Text>
<View style={[styles.flex_row,styles.align_stretch]}>
<Text style={styles.box}>1</Text>
<Text style={styles.box}>2</Text>
<Text style={styles.box}>3</Text>
<Text style={styles.box}>4</Text>
</View>
</View>
<View style={styles.wrapper}>
<Text>父容器横向reverse布局</Text>
<View style={styles.flex_reverse}>
<Text style={styles.box}>1</Text>
<Text style={styles.box}>2</Text>
<Text style={styles.box}>3</Text>
<Text style={styles.box}>4</Text>
</View>
</View>
<View>
<Text>父容器垂直布局</Text>
<View style={styles.flex_column}>
<Text style={styles.box}>1</Text>
<Text style={styles.box}>2</Text>
<Text style={styles.box}>3</Text>
<Text style={styles.box}>4</Text>
</View>
</View>
<View>
<Text>父容器垂直reverse布局</Text>
<View style={styles.flex_column_reverse}>
<Text style={styles.box}>1</Text>
<Text style={styles.box}>2</Text>
<Text style={styles.box}>3</Text>
<Text style={styles.box}>4</Text>
</View>
</View>
<View style={styles.wrapper}>
<Text>父容器横向布局，可换行</Text>
<View style={[styles.flex_row,styles.flex_wrap]}>
<Text style={styles.box}>1</Text>
<Text style={styles.box}>2</Text>
<Text style={styles.box}>3</Text>
<Text style={styles.box}>4</Text>
</View>
</View>
<View style={styles.wrapper}>
<Text>父容器横向布局，不可换行</Text>
<View style={[styles.flex_row,styles.flex_nowrap]}>
<Text style={styles.box}>1</Text>
<Text style={styles.box}>2</Text>
<Text style={styles.box}>3</Text>
<Text style={styles.box}>4</Text>
</View>
</View>
<View style={styles.wrapper}>
<Text>父容器横向布局，按比例分配</Text>
<View style={[styles.flex_row]}>
<Text style={[{flex:1},styles.color_pink]}>1</Text>
<Text style={[{flex:2},styles.color_pink]}>2</Text>
<Text style={[{flex:3},styles.color_pink]}>3</Text>
<Text style={[{flex:3},styles.color_pink]}>4</Text>
</View>
</View>
</View>
</ScrollView>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1, // 容器撑满整个屏幕
backgroundColor: '#e6fffd',
marginTop: 20
},
wrapper: {
marginHorizontal:10,
marginVertical: 10,
backgroundColor: '#fff',
height: 120,
paddingTop: 10,
borderRadius: 5,
},
flex_row: {
flexDirection: 'row',
flex:1 //充满父容器
},
flex_column:{
flexDirection: 'column'
},
flex_reverse: {
flexDirection: 'row-reverse'
},
flex_column_reverse: {
flexDirection: 'column-reverse'
},
box: {
height:50,
width:50,
backgroundColor: 'pink',
textAlign: 'center',
lineHeight: 50,
borderWidth:1,
borderColor: '#eee'
},
justify_end: {
justifyContent: 'flex-end'
},
justify_center: {
justifyContent: 'center'
},
justify_between: {
justifyContent: 'space-between'
},
justify_around: {
justifyContent: 'space-around'
},
align_end: {
alignItems: 'flex-end'
},
align_center: {
alignItems: 'center'
},
align_stretch: {
alignItems: 'stretch' // 使用height时，在这个轴上的伸缩属性stretch就会失效
},
flex_wrap: {
width: 150,
backgroundColor: '#eee',
flexWrap: 'wrap'
},
flex_nowrap: {
width: 150,
backgroundColor: '#eee',
flexWrap: 'nowrap'
},
color_pink: {
backgroundColor: 'pink',
borderWidth:1,
borderColor: '#eee'
}
})
~~~
