React Native入门教程 3 -- Flex布局
2016-07-04 11:43
691 查看
上一篇文章中介绍了基本组件的使用 React Native入门教程(笔记) 2 – 基本组件使用及样式
本节内容将继续沿用facebook官方例子介绍如何使用Flexbox布局把界面设计的多样化。
转载请注明出处:http://blog.csdn.net/wingichoy/article/details/51811866
他主要有以下几种属性
flexDirection //设置主轴方向
flexWrap //设置是否换行
justifyContent //主轴对齐方式
alignItems //交叉轴对齐方式
我们将上一篇中的布局样式修改一下,来介绍flex布局的主要属性。
即可
如图所示,要决定主轴的方向(水平、垂直),可以按照如下设置
此时,添加flexWrap属性
发现已经成功换行。
如图所示,要决定是否换行,可以按照如下设置
顺序效果如下:
注意仔细区分between和around的区别。
顺序效果如下:
到此,Flex的常用属性就已经介绍完毕了,如果你想要了解更多,不妨参考这篇文章
style如下
现在界面已经如下所示了:
嗯嗯 感觉不错。今天就到这里吧。
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
下一篇: React Native入门教程 4 – 从服务器获取信息
本节内容将继续沿用facebook官方例子介绍如何使用Flexbox布局把界面设计的多样化。
转载请注明出处:http://blog.csdn.net/wingichoy/article/details/51811866
Flexbox
Flex布局意思为弹性布局,他使用起来非常的方便。他主要有以下几种属性
flexDirection //设置主轴方向
flexWrap //设置是否换行
justifyContent //主轴对齐方式
alignItems //交叉轴对齐方式
我们将上一篇中的布局样式修改一下,来介绍flex布局的主要属性。
1.flexDirection
可以看到Text和Image是竖直排列的,下面将其改为水平排列,只需要在style添加一行flexDirection:'row'
即可
如图所示,要决定主轴的方向(水平、垂直),可以按照如下设置
flexDirection:'row' //主轴水平 flexDirection:'column '//主轴垂直
2.flexWrap
这个属性用于设置是否换行,默认为nowrap,即不换行,为了演示,将图片改小,添加多几个Text。此时,添加flexWrap属性
flexWrap:'wrap',
发现已经成功换行。
如图所示,要决定是否换行,可以按照如下设置
flexWrap:'wrap' //设置换行 flexWrap:'nowrap'//设置不换行
3.justifyContent
这个属性用于视图在主轴上的对其方式,主要有如下几种justifyContent:'flex-start' //开头对齐 justifyContent:'flex-end' //末尾对齐 justifyContent:'center' //居中 justifyContent:'space-between' //均匀分布 justifyContent:'space-around' //每个视图两侧padding一样
顺序效果如下:
flex-start
flex-end
space-between
space-around
注意仔细区分between和around的区别。
4.alignItems
这个属性是指主轴的交叉轴的对其方式(X,Y轴对应),主要有以下几种alignItems: 'flex-start' //开头对齐 alignItems: 'flex-end' //末尾对齐 alignItems: 'center' //居中对齐 alignItems: 'stretch' //默认值充满整个容器
顺序效果如下:
flex-start
flex-end
center
stretch
为了区分我给text加了背景 注意其细微的区别到此,Flex的常用属性就已经介绍完毕了,如果你想要了解更多,不妨参考这篇文章
学以致用
下面我们设计以下布局,将文字放到海报的右方。因为整体水平排列,内部垂直排列,所以我们需要多加一个容器将两个Text包裹起来(Android对比LinearLayout嵌套)。修改之后的代码如下:class WingProject extends Component { render() { var movie = MOVIES_DATA[0]; return ( <View style={styles.container}> <Image source={{uri:movie.img}} style = {styles.image} /> //将两个Text用新的容器包裹起来,新容器的style为rightContainer <View style={styles.rightContainer}> <Text style = {styles.title}>{movie.title}</Text> <Text style = {styles.title}>{movie.year}</Text> </View> </View> ); } }
style如下
const styles = StyleSheet.create({ container: { flex:1, //主轴水平排列 flexDirection:'row', //对其方式居中 justifyContent: 'center', //交叉轴居中 alignItems:'center', backgroundColor: '#F5FCFF', }, image:{ width:400, height:600, }, title:{ padding:5, fontSize:20, }, rightContainer:{ //设置右容器为竖直排列 flexDirection:'column' } });
现在界面已经如下所示了:
嗯嗯 感觉不错。今天就到这里吧。
如果你喜欢我的博客,请评论或者点击关注,谢谢!
参考文章:http://facebook.github.io/react-native/docs/sample-application-movies.htmlhttp://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
下一篇: React Native入门教程 4 – 从服务器获取信息
相关文章推荐
- iOS 开发之 ReactiveCocoa(进阶)
- iOS 开发之 ReactiveCocoa(基础)
- React-Native学习指南
- react做tab切换的几种方式
- React Native之Android Tabbar的实现.
- React Native学习笔记(五)Redux基础学习
- react native 错误:Make sure you have an Android emulator running or a device connected and have set up
- react环境搭建
- react+webpack快速搭建web项目
- 基于Reactor模式的HBase服务端请求处理分析
- Reaction of travel book-HangZhou
- React Native 中 component 生命周期
- Javascript.ReactNative-2-javascript-syntax-in-react-native
- reactor设计模式
- React Mixin 的介绍
- reactor与proactor模式
- react教程
- React Native入门教程2 -- 基本组件使用及样式
- React Native入门教程2 -- 基本组件使用及样式
- React Native 开发到上线记录(二)