上一篇文章中介绍了基本组件的使用 React Native入门教程(笔记) 2 – 基本组件使用及样式

本节内容将继续沿用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.html

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

下一篇:React Native入门教程 4 – 从服务器获取信息

React Native入门教程 3 -- Flex布局的更多相关文章

  1. React Native入门教程2 -- 基本组件使用及样式

    在上一篇文章中,我们学会了如何搭建React Native的环境(React Native入门教程(笔记) 1 – 开发环境搭建),不知道你们是否搭建好了呢,如果还没有,那么快动起小手,来体验RN带给 ...

  2. React Native入门教程 1 -- 开发环境搭建

    有人问我为啥很久不更新博客..我只能说在学校宿舍真的没有学习的环境..基本上在宿舍里面很颓废..不过要毕业找工作了,我要渐渐把这个心态调整过来,就从react-native第一篇博客开始.话说RN也出 ...

  3. React Native入门——布局实践:开发京东client首页(一)

    有了一些对React Native开发的简单了解,让我们从实战出发.一起来构建一个简单的京东client. 这个client是仿照之前版本号的京东client开发的Android版应用,来源于CSDN ...

  4. React Native 入门基础知识总结

    中秋在家闲得无事,想着做点啥,后来想想,为啥不学学 react native.在学习 React Native 时, 需要对前端(HTML,CSS,JavaScript)知识有所了解.对于JS,可以看 ...

  5. React Native填坑之旅--布局篇

    代码在这里: https://github.com/future-challenger/petshop/tree/master/client/petshop/src/controller 回头看看RN ...

  6. 【REACT NATIVE 系列教程之十二】REACT NATIVE(JS/ES)与IOS(OBJECT-C)交互通信

    http://blog.csdn.net/xiaominghimi/article/details/51586492 一用到跨平台的引擎必然要有引擎与各平台原生进行交互通信的需要.那么Himi先讲解R ...

  7. 基于Nodejs生态圈的TypeScript+React开发入门教程

    基于Nodejs生态圈的TypeScript+React开发入门教程   概述 本教程旨在为基于Nodejs npm生态圈的前端程序开发提供入门讲解. Nodejs是什么 Nodejs是一个高性能Ja ...

  8. React Native入门-刘望舒

    React Native入门(一)环境搭建与Hello World React Native入门(二)Atom+Nuclide安装.配置与调试 React Native入门(三)组件的Props(属性 ...

  9. React实例入门教程(1)基础API,JSX语法--hello world

      前  言 毫无疑问,react是目前最最热门的框架(没有之一),了解并学习使用React,可以说是现在每个前端工程师都需要的. 在前端领域,一个框架为何会如此之火爆,无外乎两个原因:性能优秀,开发 ...

随机推荐

  1. LeetCode 2

    No1 Given a sorted array and a target value, return the index if the target is found. If not, return ...

  2. java怎样获取CPU占用率和硬盘占用率

    通过jmx可以监控vm内存使用,系统内存使用等,以下是网上某博客代码,特点是通过window和linux命令获得CPU使用率. 利用java程序实现获取计算机cpu利用率和内存使用信息. packag ...

  3. 在OpenCV3.1.0中使用SIFT,SURF算法

    写在前边: 1.我使用的是python2.7 + OpenCV3.1.0 2.OpenCV3.0.0+的文档有很大问题,很多文档写的还是OpenCV2.0+, OpenCV3.0+根本用不了,其中有一 ...

  4. 在java中如何使用etcd的v2 和v3 api获取配置,并且对配置的变化进行监控

    etcd 和zookeeper 很像,都可以用来做配置管理.并且etcd可以在目前流行的Kubernetes中使用. 但是etcd 提供了v2版本合v3的版本的两种api.我们现在分别来介绍一下这两个 ...

  5. ACM Tempter of the Bone

    小狗在古老的迷宫(maze)中发现了一个骨头,这使它非常着迷.然而,当他把它捡起来的时候,迷宫开始摇晃,狗狗可以感觉到地面下沉(sinking).他意识到这块骨头是一个陷阱(trap),他拼命地想摆脱 ...

  6. Node.js 实用工具

    稳定性: 4 - 锁定 这些函数都在'util' 模块里.使用 require('util') 来访问他们. util 模块原先设计的初衷是用来支持 node 的内部 API 的.这里的很多的函数对你 ...

  7. django之数据库orm

    一.数据库的配置 1 django默认支持sqlite,mysql, oracle,postgresql数据库. <1>sqlite django默认使用sqlite的数据库,默认自带sq ...

  8. 分别用face++和百度获取人脸属性(python单机版)

    称之为单机版,主要是相对于调用摄像头实时识别而言.本篇主要py2下利用face++和百度接口获取本地图片中的人脸属性,并按照一定格式保存数据. face++版 face++是刚注册的,只能用一个试用的 ...

  9. 学习笔记:Zookeeper 应用案例(上下线动态感知)

    1.Zookeeper 应用案例(上下线动态感知) 8.1 案例1--服务器上下线动态感知 8.1.1 需求描述 某分布式系统中,主节点可以有多台,可以动态上下线 任意一台客户端都能实时感知到主节点服 ...

  10. Swift基础之UIPickerView和小animate的使用

    写一个简单的UIPickerView的使用Demo,比较简单,其中和一个小动画的结合使用 UIPickerView的使用基本上跟OC语言中的一样,就是写法的样式问题,想必开发过OC的应该不需要多讲了, ...