深入理解react native布局(一)居中
2016-12-27 15:42
579 查看
刚刚做完了一个项目,基本上把react native各种布局方式都用上了,发现了很多坑,也学会和很多,这里给大家分享一下哈。
首先我们要有个概念:react native里面是兼容大部分我们在css里面用到的布局方式,此外接触过css里面flex布局方式的话,我们会发现react native内的flex布局方式基本上和
css里的flex布局方式类似,所以不要觉得react native 布局不好做,其实他比起css来说要容易,比原生开发更是容易不知道多少倍。战略上藐视他!!!
对题:居中
首先大概说下flex需要知道的地方:
flex布局依赖于flexDirection的,意思就是说:以View为例,如果flex布局方式的话,如果它内部子组件的话他们的排列方向有横向和纵向之分。默认的react native已经设定了flex内部的布局为纵向的。
![](http://img.blog.csdn.net/20161227161020002?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveHNna2FrYQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
那如果是横向的呢:
结果:
![](http://img.blog.csdn.net/20161227161246128?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveHNna2FrYQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
是不是很简单呢,但是需要指出的是:
我们会发现在当flexDirection是“row”时,内部组件排列顺序为横向排列时,子组件的高度会自动撑满父组件。同样的道理如果是“column”时子组件的宽度会自动撑满父组件。记住这一点。
所以,大概有个印象了吧。
下面我们来说说flex上的值,我们在看别人代码的时候经常看到flelx:1,flex:2 之类的东东,这些到底是干嘛的呢?实践一下吧。我们以flexDirection为“column” 为例
![](http://img.blog.csdn.net/20161227162020554?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveHNna2FrYQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
结果很明显啦,flex:1 会把其余组件(没有设置flex)剩余的空间全部占完。
那我们试试下面这些:
结果:
![](http://img.blog.csdn.net/20161227162545463?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveHNna2FrYQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
所以是不是比起原生来简单多了,仅仅flex:1
![](http://static.blog.csdn.net/xheditor/xheditor_emot/default/titter.gif)
,就均分了。对我们已经发现了一种自动居中的方式了。
react native 实现居中有多种方式:
结果:
![](http://img.blog.csdn.net/20161227162719960?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveHNna2FrYQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
so easy
![](http://static.blog.csdn.net/xheditor/xheditor_emot/default/laugh.gif)
,居中了。
so,那justifyContent这个属性是做什么的呢?
ok。
在说说我们的aliginSelf属性
我们经常会遇到这样的情况
上代码:
![](http://img.blog.csdn.net/20161227171705808?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveHNna2FrYQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
明白了吧,alignSelf有“flex-start”,"flex-end","center",这几个属性。纳尼,“center”,
![](http://static.blog.csdn.net/xheditor/xheditor_emot/default/proud.gif)
,我们是不是又发现了一种新的居中方式呢。不过alignSelf只适用于与父组件布局方向相垂直方向上的对齐方式。alignSelf的优先级大于alignItems
所以:居中如何实现呢,有下面几种方法
1】通过flex实现、2】通过flex实现、3】还是通过flex实现
![](http://static.blog.csdn.net/xheditor/xheditor_emot/default/laugh.gif)
欢迎拍砖,后续给大家讲讲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
![](http://static.blog.csdn.net/xheditor/xheditor_emot/default/titter.gif)
,就均分了。对我们已经发现了一种自动居中的方式了。
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
![](http://static.blog.csdn.net/xheditor/xheditor_emot/default/laugh.gif)
,居中了。
下面我们说说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”,
![](http://static.blog.csdn.net/xheditor/xheditor_emot/default/proud.gif)
,我们是不是又发现了一种新的居中方式呢。不过alignSelf只适用于与父组件布局方向相垂直方向上的对齐方式。alignSelf的优先级大于alignItems
所以:居中如何实现呢,有下面几种方法
1】通过flex实现、2】通过flex实现、3】还是通过flex实现
![](http://static.blog.csdn.net/xheditor/xheditor_emot/default/laugh.gif)
欢迎拍砖,后续给大家讲讲react-native内的局对布局,大坑
相关文章推荐
- 深入理解盒子——模型文本垂直居中的N种方法 单行/多行文字(未知高度/固定高度)
- 深入理解CSS居中问题
- 深刻理解Div以及内联对象的水平垂直居中问题
- 补码,反码深入理解
- 深入理解Looper、MessageQueue、Handler之间的关系,Android的异步消息机制
- 深入理解javascript原型和闭包(13)-【作用域】和【上下文环境】
- 深入理解DOM事件机制系列第三篇——事件对象
- 平稳转型WP系列之在Windows Phone中谈“委托”、“事件”和“接口”(一、深入理解)
- 深入理解JavaScript系列
- 深入理解PHP代码的执行的过程
- 机器学习算法笔记系列之深入理解主成分分析PCA-Python实现篇
- 深入理解Java NIO
- 深入理解java虚拟机
- 深入理解java异常处理机制
- 深入理解JavaScript系列(2):揭秘命名函数表达式
- 深入理解Java类加载器(1):Java类加载原理解析
- Android 深入理解Android中的自定义属性
- 深入理解Lock
- 深入理解计算机系统--第二章(读书笔记)
- 深入理解计算机操作系统(笔记)