一. React Native的由来
-
它是什么
React Native是Facebook在React.js Conf2015大会上推出的一个用于开发Android和iOS App的一个框架，主要编程语言是JavaScript，UI使用JSX(一种类似于XML的UI描述语言),
核心设计理念：
即拥有Native的用户体验，又保留React的开发效率
-
为什么出现
-
尽管在移动开发中，原生App的开发成本很高，但现阶段基于原生开发仍然是必须的，因为Web的用户体验扔无法超越Native，主要体现在：
- Native的原生控件有更好的体验
- Native有更好的手势识别
- Native有更合适的线性模型，尽管Web Worker可以解决一部分问题，但如图像解码、文本渲染，扔无法多线程渲染，这影响了Web的流畅性
-
-
补充. React Native和React.js有什么区别
- 相同点
任何一种平台框架都有两部分：UI和逻辑，对于这两种技术来说，UI都使用了JSX,而逻辑都使用了JS
- 不同点
主要区别还是JSX,不管是React Native，还是React.js,在UI上都有一种技术：虚拟DOM(Virtual DOM)
首先要了解什么是Virtual DOM
a) web通过DOM管理Element,而DOM的效率是很低的，为了提高DOM的效率，React.js提供了Virtual DOM，这项技术的工作是完全放在内存中完成的，而且是增量修改DOM树，所以效率非常高 b) React.js主要用于web开发，在运行时使用React.js将虚拟DOM装换成了实际DOM c) React Native主要用于开发Android和iOS App,就是在运行时将虚拟DOM映射成Android和iOS的本地控件
二. React的特点及优势
-
特点
使用了虚拟DOM(Virtual DOM)
提供了响应式(Reactive)和组件化(Composable)的视图组件
将注意力集中保持在核心库，伴随于此，有配套的路由和负责处理全局状态管理的库
-
优势
-
跨平台开发
运用React Native，我们可以使用同一份业务逻辑核心代码来创建原生应用运行在Web端，Android端和iOS端；
最求极致的用户体验：实时热部署
-
learn once,write everywhere(最具魅力)
React Native不强求一份原生代码支持多个平台，所以不是write once,run anywhere
-
三. React Native开发注意事项
- react native在iOS上仅支持iOS7以上，Android仅支持Android4.1以上
中文帮助文档：
http://reactnative.cn/docs/0.42/getting-started.html
github地址：
https://github.com/facebook/react-native
-
由于React Native的版本更新速度很快，如果没有深厚的JavaScript基础，建议选择
功能适中，交互一般，不需要考虑特别多的系统原生支持
对于部分复杂的应用，可以考虑原生+React Native混合开发
四. React Native常用组件之View
- JSX和组件的概念
1) react的核心机制之一就是虚拟DOM:可以在内存中创建虚拟DOM元素。React利用虚拟DOM来减少对实际DOM的操作从而提升性能，传统的创建方式是
var img = document.createElement("img");
img.src="images/1.jpg";
$("#main").appendChild(newBox);
但这样的代码可读性并不好，于是react发明了JSX，利用我们熟悉的HTML语法来创建虚拟DOM
var root = (
<div class="box">
</div>
)
- 在实际开发中，JSX在产品打包阶段已经编译成纯JavaScript，JSX的语法带来任何性能影响，因此，JSX本身并不是什么高深的技术，可以说只是一个比较高级但很直观的语法糖
语法糖：
指计算机语言中添加的某种语法，这种语法对语言的功能并没有影响，但是更方便程序员使用。通常来说使用语法糖能够增加程序的可读性，从而减少程序代码出错的机会。
- View组件中常用的属性
1) React Native组件View，其作用等同于iOS中的UIView,Android中的Android.view，或是网页中的<div>标签，它是所有组件的父组件
2) 样式见图
- View组件运用
1) 实例
var MyView = React.createClass({
render() {
return (
<View style={{flex:1,backgroundColor:"yellow"}}>
<View style={{width:300,height:50,background:"red"}}</View>
</View>
)
}
})
2) 在途中的render函数中，我们返回了一个顶层的View，然后View中包含着另一个子层的View,我们在组件的style里面通过对象的方式设置组件的样式
3) 在React Native开发中，更加推荐我们采用StyleSheet来进行组件的布局，这样的话，代码在结构上会更加的清晰，也利于后期维护
4) 在React Native开发中，更加推荐我们采用StyleSheet来进行组件的布局，这样的话，代码在结构上会更加的清晰，也有利于后期维护
var MyView = React.createClass({
render() {
return (
<View style={viewStyle.topView}>
<View style={viewStyle.innerView}</View>
</View>
)
}
})
var viewStyle = StyleSheet.create({
topView:{
flex:1,
backgroundColor:"yellow"
},
innerView:{
width:300,
height:50,
background:"red"
}
})
五. FlexBox布局
-
我们之前做的布局都是基于盒子模型，而现在我们有一种全新的布局方式-flex布局，它又叫做弹性盒模型，旨在通过弹性的方式来对齐和分布容器中的内容，使其能使用不同屏幕，为盒模型提供最大的灵活性，目前他已经得到了所有浏览器的支持。
注意：在React中, padding和margin的用法照样是可行的
-
flex布局主要思想
让容器有能力让其子项目能够改变其宽度、高度，以最佳方式填充可用空间
-
flexbox在开发中的应用场景
- 浮动布局
- 各种机型屏幕的适配
- 水平和垂直居中
- 自动分配宽度
....
-
flexbox布局原理
容器默认存在两根轴：
主轴：从上到下
交叉轴：从左到右主轴和交叉轴始终是处于垂直状态
-
flexbox的常用属性
-
flexDirection - 决定主轴的方向
row:主轴为水平方向
column:主轴为垂直方向 -
justifyContent - 定义了伸缩项目在主轴线的对其方式
flex-start: 伸缩项目向一行的起始位置靠齐
flex-end: 伸缩项目向一行的结束为止靠齐
center: 伸缩项目向一行的中间位置靠齐
space-between: 两端对其，项目之间的间隔都相等
space-around: 伸缩项目会平均地分布在行里，两端保留一半的空间
-
alignItems - 定义项目在交叉轴上如何对齐
flex-start:交叉轴的起点对齐
flex-end:交叉轴的终点对齐
center:交叉轴的中点对齐
stretch: 如果项目未设置高度或者设为auto,将占满整个容器的高度
flexWrap - 项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行
nowrap(默认值)：不换行
wrap：换行，第一行在上方由于在rn 0.28之后的版本上官方已经修改了flexWrap:'wrap'的工作方式了，之前版本的是flexWrap:'wrap'和默认的alignItems: 'stretch'是一起工作的；如果是0.28之后的版本，你需要加上alignItems: 'flex-start'
-
-
flexbox的元素属性
-
flex - 设置元素的宽度
宽度= flex/父元素剩余宽度
容器需要添加flexDirection才能让子元素flex
alignSelf - 单个元素的对齐方
a. 可覆盖align-items属性,默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
b. 可选值：
auto/flex-start/flex-end/center/stretch -
七. 获取当前屏幕的宽度、高度
首先需要获取到系统的Dimensions类库
var dimensions = require("Dimensions");
var {width,height} = Dimensions.get("window");
八. 绝对定位与相对定位
1. 与之前所学的CSS定位不同，在React Native中定位不需要再父组件中设置position属性
2. 而且如果父组件设置了内边距，relative会做出相应的定位改变,而absolute则不会