本文主要讲解与flex布局相关的属性,包括flex,flexDirection,alignItems,justifyContent,flexWrap等。React Native其他所有属性均在LayoutPropTypes.js中定义,在编辑器中搜索LayoutPropTypes.js即可看到。文末附所有测试代码。
首先定义几个样式,这样在视图中能更好的看到测试效果:
const styles = StyleSheet.create({
// 父容器样式
container: {
borderWidth:1,
padding:5,
margin:5,
},
// 文字标签样式
label: {
color:'#333333',
margin:5,
},
});
子元素在父容器中的排列方向:flexDirection:'row'
, 水平排列flexDirection:'column'
, 垂直排列
子元素排列方向举例
1.默认情况下父容器flexDirection:'column'
,子元素从上到下垂直排列:
<Text style={styles.label}>默认情况下父容器flexDirection:'column',子元素从上到下垂直排列</Text>
<View style={[{},styles.container]}>
<Text>测试</Text>
<Text>测试</Text>
</View>
视图:
2.父容器flexDirection:'column'
,子元素从左到右水平排列:
<Text style={styles.label}>父容器flexDirection:'column',子元素从左到右水平排列</Text>
<View style={[styles.container,{flexDirection:'row'}]}>
<Text>测试</Text>
<Text>测试</Text>
<Text>测试</Text>
</View>
视图:
3.父容器flexDirection:'column'
,子元素从上到下垂直排列,与默认情况父容器不设置flexDirection相同:
<Text style={styles.label}>父容器flexDirection:'column',子元素从上到下垂直排列,与默认情况父容器不设置flexDirection相同</Text>
<View style={[{flexDirection:'column',},styles.container]}>
<Text>测试</Text>
<Text>测试</Text>
<Text>测试</Text>
</View>
视图:
类似于Android中权重layout_weight
的概念,需要配合flexDirection
使用才有效果。
举例
1.父容器默认情况下(flexDirection:'column'
)子元素从上到下垂直排列,此时子元素默认水平方向填充父容器;子元素flex:1
,在垂直方向起作用,表示垂直方向占满父容器空间:
<View style={[styles.container,{height:80}]}>
<View style={{backgroundColor:'red',flex:1}}/>
<View style={{height:20,backgroundColor:'green'}/>
</View>
视图:
2.父容器flexDirection:'row'
时子元素从左到右水平排列;flex:1
在水平方向起作用,表示水平方向占满全部父容器空间:
<Text style={styles.label}>父容器flexDirection:'row'时子元素从左到右水平排列;flex:1在水平方向起作用,表示水平方向占满全部父容器空间</Text>
<View style={[{height:60,flexDirection:'row'},styles.container]}>
<View style={{height:20,flex:1,backgroundColor:'red'}}></View>
<View style={{height:20,width:100,backgroundColor:'green',}}></View>
</View>
视图:
3.父容器flexDirection:'column'
,只有一个子元素;子元素flex:1
,占满全部父容器空间,子元素height
不起作用:
<Text style={styles.label}>父容器flexDirection:'column',只有一个子元素;子元素flex:1,占满全部父容器空间,子元素height不起作用</Text>
<View style={[{height:100,flexDirection:'column'},styles.container]}>
<View style={{flex:1,backgroundColor:'red',height:10,}}></View>
</View>
视图:
4.父容器flexDirection:'row'
,只有一个子元素;子元素flex:1
,占满全部父容器空间,子元素width
不起作用:
<Text style={styles.label}>父容器flexDirection:'row',只有一个子元素;子元素flex:1,占满全部父容器空间,子元素width不起作用</Text>
<View style={[{height:100,flexDirection:'row'},styles.container]}>
<View style={{flex:1,backgroundColor:'red',width:10}}/>
</View>
视图:
5.父容器flexDirection:'row'
,子元素在水平方向按比例分配父容器空间:
<Text style={styles.label}>父容器flexDirection:'row',子元素在水平方向按比例分配父容器空间</Text>
<View style={[{height:40,flexDirection:'row'},styles.container]}>
<View style={{flex:1,backgroundColor:'red',height:20}}/>
<View style={{flex:2,backgroundColor:'green',height:20}}/>
</View>
视图:
6.父容器flexDirection:'column'
,子元素在垂直方向按比例分配父容器空间:
<Text style={styles.label}>父容器flexDirection:'column',子元素在垂直方向按比例分配父容器空间</Text>
<View style={[{height:100,flexDirection:'column'},styles.container]}>
<View style={{flex:1,backgroundColor:'red',width:20}}/>
<View style={{flex:1,backgroundColor:'green',width:20}}/>
</View>
视图:
表示在水平方向或垂直方向子元素的对齐方式,需要配合flexDirection
使用。
当父容器flexDirection:'row'时
justifyContent:'flex-start'
,表示子元素水平方向左对齐justifyContent:'center'
,表示子元素水平居中对齐justifyContent:'flex-end'
,表示子元素水平方向右对齐justifyContent:'space-between'
,表示子元素水平方向元素之间间隔相同justifyContent:'space-around'
,表示子元素水平方向元素两边间隔相同
当父容器flexDirection:'column'时
justifyContent:'flex-start'
,表示子元素垂直方向上对齐justifyContent:'center'
,表示子元素垂直居下对齐justifyContent:'flex-end'
,表示子元素垂直方向居中对齐justifyContent:'space-between'
,表示垂直方向子元素之间间隔相同justifyContent:'space-around'
,表示垂直方向子元素两边间隔相同
水平方向即flexDirection:'row'时举例
1.水平方向左对齐,justifyContent:'flex-start'
:
<Text style={styles.label}>水平方向左对齐,justifyContent:'flex-start'</Text>
<View style={[{flexDirection:'row',justifyContent:'flex-start'},styles.container]}>
<Text>测试</Text>
<Text>测试</Text>
<Text>测试</Text>
</View>
视图:
2.水平方向居中对齐,justifyContent:'center'
:
<Text style={styles.label}>水平方向居中对齐,justifyContent:'center'</Text>
<View style={[{flexDirection:'row',justifyContent:'center'},styles.container]}>
<Text>测试</Text>
<Text>测试</Text>
<Text>测试</Text>
</View>
视图:
3.水平方向右对齐,justifyContent:'flex-end'
:
<Text style={styles.label}>水平方向右对齐,justifyContent:'flex-end'</Text>
<View style={[{flexDirection:'row',justifyContent:'flex-end'},styles.container]}>
<Text>测试</Text>
<Text>测试</Text>
<Text>测试</Text>
</View>
视图:
4.水平方向元素之间间隔相同,justifyContent:'space-between'
:
<Text style={styles.label}>水平方向元素之间间隔相同,justifyContent:'space-between'</Text>
<View style={[{flexDirection:'row',justifyContent:'space-between'},styles.container]}>
<Text>测试</Text>
<Text>测试</Text>
<Text>测试</Text>
</View>
视图:
5.水平方向元素两边间隔相同,justifyContent:'space-around'
:
<Text style={styles.label}>水平方向元素两边间隔相同,justifyContent:'space-around'</Text>
<View style={[{flexDirection:'row',justifyContent:'space-around'},styles.container]}>
<Text>测试</Text>
<Text>测试</Text>
<Text>测试</Text>
</View>
视图:
垂直方向即flexDirection:'column'时举例
1.垂直方向上对齐,justifyContent:'flex-start'
<Text style={styles.label}>垂直方向上对齐,justifyContent:'flex-start'</Text>
<View style={[{flexDirection:'column',height:100,justifyContent:'flex-start',},styles.container]}>
<Text>测试</Text>
<Text>测试</Text>
</View>
视图:
2.垂直方向居中对齐,justifyContent:'center'
<Text style={styles.label}>垂直方向居中对齐,justifyContent:'center'</Text>
<View style={[{flexDirection:'column',height:100,justifyContent:'center',},styles.container]}>
<Text>测试</Text>
<Text>测试</Text>
</View>
视图:
3.垂直方向下对齐,justifyContent:'flex-end'
<Text style={styles.label}>垂直方向下对齐,justifyContent:'flex-end'</Text>
<View style={[{flexDirection:'column',height:100,justifyContent:'flex-end',},styles.container]}>
<Text>测试</Text>
<Text>测试</Text>
</View>
视图:
4.垂直方向元素之间间隔相同,justifyContent:'space-between'
<Text style={styles.label}>垂直方向元素之间间隔相同,justifyContent:'space-between'</Text>
<View style={[{flexDirection:'column',height:100,justifyContent:'space-between',},styles.container]}>
<Text>测试</Text>
<Text>测试</Text>
</View>
视图:
5.垂直方向元素两边间隔相同,justifyContent:'space-around'
<Text style={styles.label}>垂直方向元素两边间隔相同,justifyContent:'space-around'</Text>
<View style={[{flexDirection:'column',height:100,justifyContent:'space-around',},styles.container]}>
<Text>测试</Text>
<Text>测试</Text>
</View>
视图:
表示在水平方向或垂直方向子元素的对齐方式,需要配合flexDirection
使用。与之相似的还有alignSelf
,alignSelf
表示自己相对于父容器的对齐方式,用法与alignItems
相同。这里要注意,alignItems
与justifyContent
在flexDirection
上的对齐方向相反。
当父容器flexDirection:'column'时
alignItems:'flex-start'
,表示子元素水平方向左对齐alignItems:'center'
,表示子元素水平居中对齐alignItems:'flex-end'
,表示子元素水平方向右对齐
当父容器flexDirection:'row'时
alignItems:'flex-start'
,表示子元素垂直方向上对齐alignItems:'center'
,表示子元素垂直居下对齐alignItems:'flex-end'
,表示子元素垂直方向居中对齐
水平方向即flexDirection:'column'时举例
1.水平方向左对齐,alignItems:'flex-start'
<Text style={styles.label}>水平方向左对齐,alignItems:'flex-start'</Text>
<View style={[{flexDirection:'column',alignItems:'flex-start',},styles.container]}>
<Text>测试</Text>
<Text>测试</Text>
<Text>测试</Text>
</View>
视图:
2.水平方向居中对齐,alignItems:'center'
<Text style={styles.label}>水平方向居中对齐,alignItems:'center'</Text>
<View style={[{flexDirection:'column',alignItems:'center',},styles.container]}>
<Text>测试</Text>
<Text>测试</Text>
<Text>测试</Text>
</View>
视图:
3.水平方向右对齐,alignItems:'flex-end'
<Text style={styles.label}>水平方向右对齐,alignItems:'flex-end'</Text>
<View style={[{flexDirection:'column',alignItems:'flex-end',},styles.container]}>
<Text>测试</Text>
<Text>测试</Text>
<Text>测试</Text>
</View>
视图:
垂直方向即flexDirection:'row'时举例
1.垂直方向上对齐,alignItems:'flex-start'
<Text style={styles.label}>垂直方向上对齐,alignItems:'flex-start'</Text>
<View style={[{flexDirection:'row',height:50,alignItems:'flex-start',},styles.container]}>
<Text>测试</Text>
<Text>测试</Text>
<Text>测试</Text>
</View>
视图:
2.垂直方向居中对齐,alignItems:'center'
<Text style={styles.label}>垂直方向居中对齐,alignItems:'center'</Text>
<View style={[{flexDirection:'row',height:50,alignItems:'center',},styles.container]}>
<Text>测试</Text>
<Text>测试</Text>
<Text>测试</Text>
</View>
视图:
3.垂直方下对齐,alignItems:'flex-end'
<Text style={styles.label}>垂直方下对齐,alignItems:'flex-end'</Text>
<View style={[{flexDirection:'row',height:50,alignItems:'flex-end',},styles.container]}>
<Text>测试</Text>
<Text>测试</Text>
<Text>测试</Text>
</View>
视图:
子元素超出容器时是否换行显示:flexWrap:'wrap'
,表示超出则换行显示,默认超出换行显示flexWrap:'nowrap'
,表示超出不换行显示
举例
1.父容器设置flexWrap:'wrap'
表明包裹内容,子元素超出父容器显示范围折行显示,默认情况不设置flexWrap
就包裹内容
<View style={{marginVertical:20,}}>
<Text style={{fontSize:20,color:'#333333'}}>父容器设置flexWrap:'wrap'表明包裹内容,子元素超出父容器显示范围折行显示,默认情况不设置flexWrap就包裹内容</Text>
</View>
<View style={{flexWrap:'wrap',flexDirection:'row'}}>
<Text>测试</Text><Text>测试</Text><Text>测试</Text>
<Text>测试</Text> <Text>测试</Text><Text>测试</Text>
<Text>测试</Text> <Text>测试</Text><Text>测试</Text>
<Text>测试</Text><Text>测试</Text> <Text>测试</Text>
<Text>测试</Text><Text>测试</Text><Text>测试</Text>
<Text>测试</Text><Text>测试</Text><Text>测试</Text>
<Text>测试</Text><Text>测试</Text><Text>测试</Text>
</View>
视图:
2.父容器设置flexWrap:'nowrap'
表明不包裹内容,子元素超出父容器部分不被显示,默认情况不设置flexWrap
就包裹内容
<View style={{marginVertical:20,}}>
<Text style={{fontSize:20,color:'#333333'}}>父容器设置flexWrap:'nowrap'表明不包裹内容,子元素超出父容器部分不被显示,默认情况不设置flexWrap就包裹内容</Text>
</View>
<View style={{flexWrap:'nowrap',flexDirection:'row'}}>
<Text>测试</Text><Text>测试</Text><Text>测试</Text>
<Text>测试</Text> <Text>测试</Text><Text>测试</Text>
<Text>测试</Text> <Text>测试</Text><Text>测试</Text>
<Text>测试</Text><Text>测试</Text> <Text>测试</Text>
<Text>测试</Text><Text>测试</Text><Text>测试</Text>
<Text>测试</Text><Text>测试</Text><Text>测试</Text>
<Text>测试</Text><Text>测试</Text><Text>测试</Text>
</View>
视图:
position:'absolute'
,表示绝对布局;通过top
,left
,bottom
,right
指定相对于父容器的位置,默认不设置为相对布局。
<View style={{marginVertical:20,}}>
<Text style={{fontSize:20,color:'#333333'}}>绝对位置</Text>
</View>
<View style={{height:116,borderWidth:1,margin:5}}>
<Text style={{fontSize:16,position:'absolute',left:20,top:50}}>局对垂直居中</Text>
</View>
视图:
'use strict';
import React, {ScrollView,Text,View,StyleSheet,AppRegistry} from 'react-native';
class Demo extends Component {
render() {
return (
<ScrollView style={{paddingTop:30}}>
<Text style={styles.label}>父容器默认情况下(flexDirection:'column')子元素从上到下垂直排列,此时子元素默认水平方向填充父容器;子元素flex:1,在垂直方向起作用,表示垂直方向占满父容器空间</Text>
<View style={[styles.container,{height:80}]}>
<View style={{backgroundColor:'red',flex:1}}></View>
<View style={{height:20,backgroundColor:'green'}}></View>
</View>
<Text style={styles.label}>父容器flexDirection:'row'时子元素从左到右水平排列;flex:1在水平方向起作用,表示水平方向占满全部父容器空间</Text>
<View style={[{height:60,flexDirection:'row'},styles.container]}>
<View style={{height:20,flex:1,backgroundColor:'red'}}></View>
<View style={{height:20,width:100,backgroundColor:'green',}}></View>
</View>
<Text style={styles.label}>父容器flexDirection:'column',只有一个子元素;子元素flex:1,占满全部父容器空间,子元素height不起作用</Text>
<View style={[{height:100,flexDirection:'column'},styles.container]}>
<View style={{flex:1,backgroundColor:'red',height:10,}}></View>
</View>
<Text style={styles.label}>父容器flexDirection:'row',只有一个子元素;子元素flex:1,占满全部父容器空间,子元素width不起作用</Text>
<View style={[{height:100,flexDirection:'row'},styles.container]}>
<View style={{flex:1,backgroundColor:'red',width:10}}></View>
</View>
<Text style={styles.label}>父容器flexDirection:'row',子元素在水平方向按比例分配父容器空间</Text>
<View style={[{height:40,flexDirection:'row'},styles.container]}>
<View style={{flex:1,backgroundColor:'red',height:20}}></View>
<View style={{flex:2,backgroundColor:'green',height:20}}></View>
</View>
<Text style={styles.label}>父容器flexDirection:'column',子元素在垂直方向按比例分配父容器空间</Text>
<View style={[{height:100,flexDirection:'column'},styles.container]}>
<View style={{flex:1,backgroundColor:'red',width:20}}></View>
<View style={{flex:1,backgroundColor:'green',width:20}}></View>
</View>
<Text style={styles.label}>默认情况下父容器flexDirection:'column',子元素从上到下垂直排列</Text>
<View style={[{},styles.container]}>
<Text>测试</Text>
<Text>测试</Text>
</View>
<Text style={styles.label}>父容器flexDirection:'column',子元素从左到右水平排列</Text>
<View style={[styles.container,{flexDirection:'row'}]}>
<Text>测试</Text>
<Text>测试</Text>
<Text>测试</Text>
</View>
<Text style={styles.label}>父容器flexDirection:'column',子元素从上到下垂直排列,与默认情况父容器不设置flexDirection相同</Text>
<View style={[{flexDirection:'column',},styles.container]}>
<Text>测试</Text>
<Text>测试</Text>
<Text>测试</Text>
</View>
<View style={{marginVertical:20,}}><Text style={{fontSize:20,color:'#333333'}}>子元素元素水平排列</Text></View>
<Text style={styles.label}>水平方向左对齐,justifyContent:'flex-start'</Text>
<View style={[{flexDirection:'row',justifyContent:'flex-start'},styles.container]}>
<Text>测试</Text>
<Text>测试</Text>
<Text>测试</Text>
</View>
<Text style={styles.label}>水平方向居中对齐,justifyContent:'center'</Text>
<View style={[{flexDirection:'row',justifyContent:'center'},styles.container]}>
<Text>测试</Text>
<Text>测试</Text>
<Text>测试</Text>
</View>
<Text style={styles.label}>水平方向右对齐,justifyContent:'flex-end'</Text>
<View style={[{flexDirection:'row',justifyContent:'flex-end'},styles.container]}>
<Text>测试</Text>
<Text>测试</Text>
<Text>测试</Text>
</View>
<Text style={styles.label}>水平方向元素之间间隔相同,justifyContent:'space-between'</Text>
<View style={[{flexDirection:'row',justifyContent:'space-between'},styles.container]}>
<Text>测试</Text>
<Text>测试</Text>
<Text>测试</Text>
</View>
<Text style={styles.label}>水平方向元素两边间隔相同,justifyContent:'space-around'</Text>
<View style={[{flexDirection:'row',justifyContent:'space-around'},styles.container]}>
<Text>测试</Text>
<Text>测试</Text>
<Text>测试</Text>
</View>
<Text style={styles.label}>垂直方向上对齐,alignItems:'flex-start'</Text>
<View style={[{flexDirection:'row',height:50,alignItems:'flex-start',},styles.container]}>
<Text>测试</Text>
<Text>测试</Text>
<Text>测试</Text>
</View>
<Text style={styles.label}>垂直方向居中对齐,alignItems:'center'</Text>
<View style={[{flexDirection:'row',height:50,alignItems:'center',},styles.container]}>
<Text>测试</Text>
<Text>测试</Text>
<Text>测试</Text>
</View>
<Text style={styles.label}>垂直方下对齐,alignItems:'flex-end'</Text>
<View style={[{flexDirection:'row',height:50,alignItems:'flex-end',},styles.container]}>
<Text>测试</Text>
<Text>测试</Text>
<Text>测试</Text>
</View>
<View style={{marginVertical:20,}}><Text style={{fontSize:20,color:'#333333'}}>子元素元素垂直排列</Text></View>
<Text style={styles.label}>水平方向左对齐,alignItems:'flex-start'</Text>
<View style={[{flexDirection:'column',alignItems:'flex-start',},styles.container]}>
<Text>测试</Text>
<Text>测试</Text>
<Text>测试</Text>
</View>
<Text style={styles.label}>水平方向居中对齐,alignItems:'center'</Text>
<View style={[{flexDirection:'column',alignItems:'center',},styles.container]}>
<Text>测试</Text>
<Text>测试</Text>
<Text>测试</Text>
</View>
<Text style={styles.label}>水平方向右对齐,alignItems:'flex-end'</Text>
<View style={[{flexDirection:'column',alignItems:'flex-end',},styles.container]}>
<Text>测试</Text>
<Text>测试</Text>
<Text>测试</Text>
</View>
<Text style={styles.label}>垂直方向上对齐,justifyContent:'flex-start'</Text>
<View style={[{flexDirection:'column',height:100,justifyContent:'flex-start',},styles.container]}>
<Text>测试</Text>
<Text>测试</Text>
</View>
<Text style={styles.label}>垂直方向居中对齐,justifyContent:'center'</Text>
<View style={[{flexDirection:'column',height:100,justifyContent:'center',},styles.container]}>
<Text>测试</Text>
<Text>测试</Text>
</View>
<Text style={styles.label}>垂直方向下对齐,justifyContent:'flex-end'</Text>
<View style={[{flexDirection:'column',height:100,justifyContent:'flex-end',},styles.container]}>
<Text>测试</Text>
<Text>测试</Text>
</View>
<Text style={styles.label}>垂直方向元素之间间隔相同,justifyContent:'space-between'</Text>
<View style={[{flexDirection:'column',height:100,justifyContent:'space-between',},styles.container]}>
<Text>测试</Text>
<Text>测试</Text>
</View>
<Text style={styles.label}>垂直方向元素两边间隔相同,justifyContent:'space-around'</Text>
<View style={[{flexDirection:'column',height:100,justifyContent:'space-around',},styles.container]}>
<Text>测试</Text>
<Text>测试</Text>
</View>
<View style={{marginVertical:20,}}><Text style={{fontSize:20,color:'#333333'}}>父容器设置flexWrap:'wrap'表明包裹内容,子元素超出父容器显示范围折行显示,默认情况不设置flexWrap就包裹内容</Text></View>
<View style={{flexWrap:'wrap',flexDirection:'row'}}>
<Text>测试</Text><Text>测试</Text><Text>测试</Text><Text>测试</Text>
<Text>测试</Text><Text>测试</Text><Text>测试</Text>
<Text>测试</Text><Text>测试</Text><Text>测试</Text><Text>测试</Text>
<Text>测试</Text><Text>测试</Text><Text>测试</Text><Text>测试</Text>
<Text>测试</Text><Text>测试</Text><Text>测试</Text>
<Text>测试</Text><Text>测试</Text><Text>测试</Text><Text>测试</Text>
</View>
<View style={{marginVertical:20,}}><Text style={{fontSize:20,color:'#333333'}}>父容器设置flexWrap:'nowrap'表明不包裹内容,子元素超出父容器部分不被显示,默认情况不设置flexWrap就包裹内容</Text></View>
<View style={{flexWrap:'nowrap',flexDirection:'row'}}>
<Text>测试</Text><Text>测试</Text><Text>测试</Text><Text>测试</Text>
<Text>测试</Text><Text>测试</Text><Text>测试</Text>
<Text>测试</Text><Text>测试</Text><Text>测试</Text><Text>测试</Text>
<Text>测试</Text><Text>测试</Text><Text>测试</Text><Text>测试</Text>
<Text>测试</Text><Text>测试</Text><Text>测试</Text>
<Text>测试</Text><Text>测试</Text><Text>测试</Text><Text>测试</Text>
</View>
<View style={{marginVertical:20,}}><Text style={{fontSize:20,color:'#333333'}}>绝对位置</Text></View>
<View style={{height:116,borderWidth:1,margin:5}}>
<Text style={{fontSize:16,position:'absolute',left:20,top:50}}>局对垂直居中</Text>
</View>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
container: {
borderWidth:1,
padding:5,
margin:5,
},
label: {
color:'#333333',
margin:5,
},
});
AppRegistry.registerComponent('Demo', () => Demo);
2024 - 快车库 - 我的知识库 重庆启连科技有限公司 渝ICP备16002641号-10
企客连连 表单助手 企服开发 榜单123