ReactNative中的flex布局和CSS中的差不多说一下justifyContent
和alignItems
的理解。这两个属性都是跟flexDirection
的row
和column
有关的,离开这两个属性说没有意义。在iOS中的坐标有X和Y轴,以便定位控件的位置,这两个属性可以把row
对应成水平方向的X轴,column
就是Y轴。
flexDirection
就是决定X和Y哪个是主轴,那么子控件就按哪个方向排列。
justifyContent
始终是以主轴为标准,alignItems
以次轴为标准排列子元素。
例如row
为主轴,效果就是x轴右对齐,y轴居中对齐。
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React,{Component } from 'react';
import {Text,Image,View,AppRegistry,StyleSheet} from 'react-native';
export default class LostOfStyle extends Component {
render(){
return (
<View style={{
flex:1,
flexDirection:'row',
justifyContent:'flex-start',
alignItems:'center',
}}>
<Text style={{width:100,backgroundColor: 'powderblue'}}>this is a blue</Text>
</View>
);
}
}