深入理解react native布局(一)居中
来源:互联网 发布:pc手机微信三合一源码 编辑:程序博客网 时间:2024/05/01 13:26
刚刚做完了一个项目,基本上把react native各种布局方式都用上了,发现了很多坑,也学会和很多,这里给大家分享一下哈。
首先我们要有个概念:react native里面是兼容大部分我们在css里面用到的布局方式,此外接触过css里面flex布局方式的话,我们会发现react native内的flex布局方式基本上和
css里的flex布局方式类似,所以不要觉得react native 布局不好做,其实他比起css来说要容易,比原生开发更是容易不知道多少倍。战略上藐视他!!!
对题:居中
首先大概说下flex需要知道的地方:
flex布局依赖于flexDirection的,意思就是说:以View为例,如果flex布局方式的话,如果它内部子组件的话他们的排列方向有横向和纵向之分。默认的react native已经设定了flex内部的布局为纵向的。
<View style={{backgroundColor:"red"}}> <View style={{backgroundColor:"green"}}> <Text>1</Text> </View> <View style={{backgroundColor:"orange"}}> <Text>1</Text> </View> <View style={{backgroundColor:"blue"}}> <Text>1</Text> </View> </View>结果:
那如果是横向的呢:
<View style={{backgroundColor:"red",flexDirection:"row",height:200}}> <View style={{backgroundColor:"green"}}> <Text>1</Text> </View> <View style={{backgroundColor:"orange"}}> <Text>1</Text> </View> <View style={{backgroundColor:"blue"}}> <Text>1</Text> </View> </View>
结果:
是不是很简单呢,但是需要指出的是:
我们会发现在当flexDirection是“row”时,内部组件排列顺序为横向排列时,子组件的高度会自动撑满父组件。同样的道理如果是“column”时子组件的宽度会自动撑满父组件。记住这一点。
所以,大概有个印象了吧。
下面我们来说说flex上的值,我们在看别人代码的时候经常看到flelx:1,flex:2 之类的东东,这些到底是干嘛的呢?实践一下吧。我们以flexDirection为“column” 为例
<View style={{backgroundColor:"red",flexDirection:"column",height:200}}> <View style={{backgroundColor:"green",flex:1}}> <Text>1</Text> </View> <View style={{backgroundColor:"orange"}}> <Text>3</Text> </View> <View style={{backgroundColor:"blue"}}> <Text>3</Text> </View> </View>结果:
结果很明显啦,flex:1 会把其余组件(没有设置flex)剩余的空间全部占完。
那我们试试下面这些:
<View style={{backgroundColor:"red",flexDirection:"column",height:200}}> <View style={{backgroundColor:"green",flex:1}}> <Text>1</Text> </View> <View style={{backgroundColor:"orange",flex:1}}> <Text>3</Text> </View> <View style={{backgroundColor:"blue",flex:1}}> <Text>3</Text> </View> </View>
结果:
所以是不是比起原生来简单多了,仅仅flex:1 ,就均分了。对我们已经发现了一种自动居中的方式了。
react native 实现居中有多种方式:
<View style={{backgroundColor:"red",flexDirection:"column",height:200}}> <View style={{backgroundColor:"green",flex:1}}> <Text>1</Text> </View> <View style={{backgroundColor:"orange"}}> <Text>2</Text> </View> <View style={{backgroundColor:"blue",flex:1}}> <Text>3</Text> </View> </View>
结果:
so easy,居中了。
下面我们说说aliginItems 和justifyContent,这两个属性都是设置在父组件上,用于界定子组件的位置。
aliginItems:官方解释:
aligns children in the cross direction. For example, if children are flowing vertically, alignItems controls how they align horizontally. It works like align-items in CSS。
大白话:
如果父组件flexDirection设置为:"column",则aliginItems指定的是在横向上,子组件的定位方式。同理如果父组件felxDirection设置为“row”,则alignItems指定的是在纵向上子组件的定位方式。
上代码:
<View style={{backgroundColor:"red",flexDirection:"column",height:200,alignItems:"center"}}> <View style={{backgroundColor:"green",flex:1}}> <Text>1</Text> </View> <View style={{backgroundColor:"orange"}}> <Text>2</Text> </View> <View style={{backgroundColor:"blue",flex:1}}> <Text>3</Text> </View> </View>结果:
ok,我们貌似已经实现垂直水平居中了。
so,那justifyContent这个属性是做什么的呢?
justifyContent:官方解释:
justifyContent aligns children in the main direction. For example, if children are flowing vertically, justifyContent controls how they align vertically. It works like justify-content in CSS (default: flex-start). See https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content for more details.
大白话:如果flexDirection为“row”,那么justifyContent指定的是子组件在横向上的对齐方式,如果flexDirection为“column”则justifyContent指定的是子组件在纵向上的对齐方式。
上代码:
<View style={{backgroundColor:"red",flexDirection:"column",height:200,justifyContent:"center"}}> <View style={{backgroundColor:"orange"}}> <Text>2</Text> </View></View>结果:
ok。
在说说我们的aliginSelf属性
我们经常会遇到这样的情况
这在react native里面怎么实现呢?呵呵,这就用到我们说的alignSelf属性了,注意alignSelf是标定在子组件上的,用于指定子组件的对齐方式。如果父组件的flexDirection是“row”,那么alignSelf就是标定子组件在竖直方向上的对齐方式,同理如果父组件的flexDirection标定为“column”,那么alignSelf指定的就是子组件在水平方向
上代码:
<View style={{backgroundColor:"red",flexDirection:"column",height:200,justifyContent:"center"}}> <View style={{backgroundColor:"orange",flexDirection:"row",alignItems:"center"}}> <Text style={{fontSize:40}}>你好,</Text> <Text style={{fontSize:15,alignSelf:"flex-end"}}>小明我们明天就要去</Text> <Text style={{fontSize:40}}>长城</Text> <Text style={{fontSize:15,alignSelf:"flex-end"}}>了</Text> </View> </View>结果:
明白了吧,alignSelf有“flex-start”,"flex-end","center",这几个属性。纳尼,“center”,,我们是不是又发现了一种新的居中方式呢。不过alignSelf只适用于与父组件布局方向相垂直方向上的对齐方式。alignSelf的优先级大于alignItems
所以:居中如何实现呢,有下面几种方法
1】通过flex实现、2】通过flex实现、3】还是通过flex实现
欢迎拍砖,后续给大家讲讲react-native内的局对布局,大坑
- 深入理解react native布局(一)居中
- React Native 布局学习(一)
- React Native flexBox布局(一)
- (一)React Native---FlexBox 布局
- React Native布局常识与技巧 一
- react-native学习(一)
- 自学React Native(一)
- React Native 入门(一)
- React Native探索(二):布局篇
- React Native 的布局(容器属性)
- 【React Native】flex布局基础(四)
- React native的flexbox布局(三)
- react-native 布局
- React-Native中的布局
- React Native Flex布局
- react-native布局
- react-native flex布局
- React Native布局篇
- Linux环境下Python操作word
- 函数嵌套例子
- 【BZOJ 2152】聪聪可可 点分治
- 如何创建一个ContentProvider,提供给其他App访问
- 远程重启服务器
- 深入理解react native布局(一)居中
- spring的事务配置5中方式
- java IO流学习
- loadrunner运行app脚本负载测试时passed transaction 为0
- [LeetCode]21. Merge Two Sorted Lists(C++)
- Quartz 2D 绘图(线条、矩形、圆弧、贝塞尔曲线、图片、文字)
- android 7.0 system UI之快速启动栏的分析(一)
- C#中的Socket编程详解
- Sonar代理设置-解决Sonar的Update Center插件列表为空的问题