React-Native 之Android学习笔记（二）

React 是一个用于构建用户界面的 JAVASCRIPT 库。
React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。
React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。
React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

1. React的特的：

• 声明式设计 −React采用声明范式，可以轻松描述应用。
• 高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
• 灵活 −React可以与已知的库或框架很好地配合。
• JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
• 组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
• 单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

推荐前端开发工具：
IDE工具：WebStorm(JavaScript 开发工具 Web前端开发神器 插件很丰富)

• 代码可以智能提醒
  模块可以在git clone https://github.com/virtoolswebplayer/ReactNative-LiveTemplate该路径中下载导导入。
  下载模板：https://github.com/wix/react-templates安装命令
  npm install react-templates -g

2.介绍:
核心组件为：
react.js react-dom.js
该组件可以在facebook 上下载，
地址：http://facebook.github.io/react/downloads.html
最新版本已经发展到了15.3.0

图1.jpg

先看一个数据传递的例子：

图二.jpg

3.语法：

• 伸缩容器
  flexbox是Flexible Box的缩写，弹性盒子布局

(1).display

  display: flex //块级伸缩容器
 
  display: inline-flex //行内级伸缩容器

(2).flex-direction
//指定主轴的方向

flex-direction:row（默认值） //水平轴，从左到右
flex-direction:row-reverse //水平轴,从右到做
flex-direction:column // 垂直轴，从上到下
flex-direction:column-reverse //垂直轴，从下到上

(3).flex-wrap //垂直轴
//伸缩容器在主轴线方向空间不足的情况下，是否换行以及该如何换行

flex-wrap:nowrap（默认值）//不足的情况下，它也不会换行，会压缩
flex-wrap:wrap //空间不足的情况下会换行，如果是水平轴的话，它会换行到下面 （从上到下）
flex-wrap:wrap-reverse//空间不足的情况下会换行，如果是水平轴的话，它会换行到上面（从下到上）

(4).flex-flow
//是flex-direction和flex-wrap的缩写版本,它同时定义了伸缩容器的主轴和侧轴，其默认值为 row nowrap

例如：
flex-flow: row wrap;//水平轴从左到右，不够时（wrap），从上到下.

(5).justify-content
//用来定义伸缩项目在主轴线的对齐方式

justify-content:flex-start（默认值）//沿主轴起始放向对齐
justify-content:flex-end //沿主轴起始结束位置对齐
justify-content:center //沿主轴中间位置对齐
justify-content:space-between //会平均分布在主轴线上
justify-content:space-around //平均分布在主轴线之间，起始和结束位置都留有空间

(6).align-items
//用来定义伸缩项目在交叉轴上的对齐方式

align-items:flex-start（默认值）//在交叉轴上垂直方向的起始位置对齐
align-items:lex-end//在交叉轴上垂直方向的底部位置对齐
align-items:center//在交叉轴上垂直方向的中间位置对齐
align-items:baseline//在交叉轴上垂直方向的根据基准线对齐，也就是说根据第一个item 的基准线对齐。
align-items:stretch//在交叉轴上垂直方向的拉伸（item项目不能设置高度）

(7).align-content
用来调整伸缩项目出现换行后在交叉轴上的对齐方式(换行后，每行的对齐方式)

align-content:flex-start // 换行后，从开始的位置对齐
align-content:lex-end// 换行后，从结束的位置对齐
align-content:center// 换行后，从中间的位置对齐
align-content:space-between// 换行后，会平均分布在交叉轴上
align-content:space-around //换行后，平均分布在主轴线之间，起始和结束位置都留有空间
align-content:stretch（默认值）