原文地址,本文为原文不完全翻译
布局与可变框
一个组件可以根据可变框计算来确定它的子组件的位置,可边框的作用是用来适配不尺寸的手机屏幕局的.
你通常需要结合flexDirection, alignItems, 和 justifyContent 来实现想要的布局.
flexDirection
控制子组件排列方向,水平方向排列赋值row,竖直方向排列赋值column,默认值为column
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
class FlexDirectionBasics extends Component{
render(){
return(
<View style={{flex:1,flexDirection: 'row'}}>
<View style={{flex:1, height: 50, backgroundColor: '#FF0000'}}/>
<View style={{flex:1, height: 50, backgroundColor: '#00FF00'}}/>
<View style={{flex:1, height: 50, backgroundColor: '#0000FF'}}/>
</View>
);
}
}
AppRegistry.registerComponent('FlexDirectionBasics', ()=>FlexDirectionBasics)
Paste_Image.png
Justify Content
这个属性决定了子组件的分布方式,分布的方式有: flex-start(挤压在其实位置), center(挤压在中间), flex-end(挤压在底部), space-around(边缘分布均分), 和 space-between(均分并居中).
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
class justyContentDemo extends Component{
render(){
return(
//尝试各种不同的值,加深理解(如:flex-start, center, flex-end)
<View style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'space-between',
}}>
<View style={{width:50,height:50,backgroundColor:'#00FF00'}}/>
<View style={{width:50,height:50,backgroundColor:'#FF0000'}}/>
<View style={{width:50,height:50,backgroundColor:'#0000FF'}}/>
</View>
);
}
}
AppRegistry.registerComponent('justyContentDemo', ()=>justyContentDemo);
Paste_Image.png
Align Items
style中添加alignItems属性可以影响子控件在父控件中的相对位置(是flex-start(顶部), center(居中), flex-end(底部), 还是拉伸填充(stretch)),假如子组件是水平排列就是影响竖直方向的相对位置,假如子组件是竖直排列影响的就是水平方向的相对位置,另外alignItems的优先级是低于宽高的,假如发生冲突的话,宽高设置才是有效的,比如下面的例子中,子组件水平排列,设置alignItems : 'stretch' , 但是因为蓝色与绿色的组件设置了height:50,所以无效,只有红色的组件有效发生了拉伸填充
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
class AlignItemsBasics extends Component {
render(){
return(
<View style={{
flex:1,
flexDirection:'row',
justifyContent:'center',
alignItems: 'stretch'
}}>
<View style={{width: 50, backgroundColor: 'red'}} />
<View style={{width: 50, height: 50, backgroundColor: 'blue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'green'}} />
</View>
)
}
}
AppRegistry.registerComponent('AlignItemsBasics', ()=>AlignItemsBasics);
Paste_Image.png
