[react-native] 02 Flexbox 的应用

Flexbox 弹性布局

container （容器）

采用Flex布局的元素，称为Flex容器（flex container），简称“容器”。

item（项目）

容器所有子元素，成为 Flex项目（flex item），简称“项目”

main axis(主轴）

cross axis（交叉轴）

web 端 弹性布局 图解

移动端 弹性布局 图解

flex box - 属性

flexDirection --- 声明主轴方向 row(web default). column (react default)

justifyContent --- 声明项目在主轴上的对齐方式

alignItems --- 声明项目在交叉轴上的对齐方式

flex --- 声明项目在主轴上的尺寸比例

弹性布局 代码示例

import React, {Component} from 'react'  
import {Text, View, StyleSheet} from 'react-native'  
  
export default class FlexDirection extends Component{  
render(){  
return (  
<View>  
<Text style={[styles.h2]}> 主轴方向 </Text>  
<View>  
<Text> flexDirection:'column'(默认) </Text>  
<View style={[styles.container]}>  
<Text style={[styles.itemBase]}> 刘备 </Text>  
<Text style={[styles.itemBase]}> 关关羽 </Text>  
<Text style={[styles.itemBase]}> 张飞 </Text>  
</View>  
</View>  
</View>  
)  
}  
}  
  
const styles = StyleSheet.create({  
container:{  
height:150,  
margin:10,  
borderWidth:1,  
borderColor:'#ddd'  
},  
h2:{  
fontSize:30,  
fontWeight:'bold'  
},  
itemBase:{  
height:30,  
borderWidth:1,  
borderColor:'red',  
backgroundColor:'#dfd',  
padding:4,  
textAlign:'center'  
}  
})

在 app.js中

import React, {Component} from 'react';  
import { Text, View } from 'react-native';  
import Index from './demo_StyleSheet/FlexDirection.js'  
  
export default class App extends Component{  
render(){  
return (  
<Index />  
)  
}  
}

column-reverse

flexColumnReverse:{flexDirection:'column-reverse'},

row. & row-reverse

flexRow:{flexDirection:'row'}4

flexRowReverse:{flexDirection:'row-reverse'}

justify-content 样式代码整理

JustifyContentStart:{justifyContent:'flex-start'}

JustifyContentCenter:{justifyContent:'center'}

JustifyContentEnd:{justifyContent:'flex-end'}

JustifyContentAround:{justifyContent:'space-around'}

JustifyContentEvenly:{justifyContent:'space-evenly'}

JustifyContentBetween:{justifyContent:'space-between'}