1，它是什么
React Native是Facebook在React.js Conf2015大会上推出的一个用于开发Android和iOS App的一个框架，主要编程语言是JavaScript，UI使用JSX(一种类似于XML的UI描述语言)，基于JavaScript，可以用简洁的语法高效绘制DOM，进而构建“可预期的”、“声明式的”Web用户界面的UI框架（库）。React并不是一套MVC框架，它专注于MVC中View层的构建，要想实现完整的MVC 架构，还需要Model 和Controller 的结构，比如伴随React推出的Flux架构，还有后续出现的Redux、Mobx等。
2，为什么出现
尽管在移动开发中，原生App的开发成本很高，但现阶段基于原生开发仍然是必须的，因为Web的用户体验扔无法超越Native，主要体现在：
1，Native的原生控件有更好的体验
2，Native有更好的手势识别
3，Native有更合适的线性模型，尽管Web Worker可以解决一部分问题，但如图像解码、文本渲染，扔无法多线程渲染，这影响了Web的流畅性
二. 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 之View
1，在实际开发中，JSX在产品打包阶段已经编译成纯JavaScript，JSX的语法带来任何性能影响，因此，JSX本身并不是什么高深的技术，可以说只是一个比较高级但很直观的语法糖
2，React Native组件View，其作用等同于iOS中的UIView,Android中的Android.view，或是网页中的<div>标签，它是所有组件的父组件
varMyView = React.createClass({
render() {
return(
<Viewstyle={viewStyle.topView}>
<Viewstyle={viewStyle.innerView}</View>
</View>
)
}
})
varviewStyle = StyleSheet.create({
topView:{
flex:1,
backgroundColor:"yellow"
},
innerView:{
width:300,
height:50,
background:"red"
}
})
在React Native开发中，更加推荐我们采用StyleSheet来进行组件的布局，这样的话，代码在结构上会更加的清晰，也有利于后期维护
四，布局方式-----FlexBox 布局
- flex布局主要思想
让容器有能力让其子项目能够改变其宽度、高度，以最佳方式填充可用空间
2，flexbox在开发中的应用场景
1， 浮动布局
2，各种机型屏幕的适配
3，水平和垂直居中
4，自动分配宽度
**容器默认存在两根轴：**
主轴：从上到下 交叉轴：从左到右
主轴和交叉轴始终是处于垂直状态
3，****flexbox****的常用属性
1， 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'
备注：1. 与之前所学的CSS定位不同，在React Native中定位不需要再父组件中设置position属性
background-position: initial initial; background-repeat: initial initial;"> 2. 而且如果父组件设置了内边距，relative会做出相应的定位改变,而absolute则不会</pre>
四，生命周期
6039087-1b6a7910e56a5bcf.png
五，React Native 优缺点分析
优点
1，能够利用JavaScript 动态更新的特性，快速迭代。
2， 相比于原生平台，开发速度更快，相比于Hybrid 框架，性能更好。
3， 相比原生开发开发速度比较快，网络请求，图片加载，json解析等都已经封装好了，几行代码直接简单调用即可，采用JSX页面绘制开发速度相对原生比较开。
4， 比起Xcode 中漫长的编译，React Native 采用了热加载（Hot Reload）的即时编译机制，使得App UI 的开发体验大幅改善，几乎到了和网页开发一样随改随变的效果
5， 由于App Store应用商店发版迭代效率问题，热更新成为了iOS平台非常渴求的功能。React Native通过JSBundle，React Native 可以即时更新App。相比原来冗长的审核和上传过程，发布和测试新功能的效率大幅提高。
6， 在组件开发方面，Native移动应用程序使用大量代码和类来在UI中进行渲染，但是React Native只使用组件名称并声明其属性，它将在UI中呈现这两个平台都为移动应用开发节省了时间。
缺点：
1，对于原生的iOS 和Android App 引入React Native，会增加整个代码库的复杂度，在深入底层原生代码进行debug 时也是困难重重，可以说是在开发和维护上的成本都有所增加。
2，React Native 严重依赖于Facebook 的维护。苹果在iOS 上每次技术的更新、政策的改变都会让原来使用了React Native 代码库受到影响，等待Facebook 和社区的修复会妨碍App 的更新和用户体验。
3，虽然React Native 是跨平台的，但是对于安卓，ios仍然有一些部分需要单独调试，但是编写，有些地方安卓ios所使用的方法也是不同的，增加维护成本。
4，除了仅编写代码之外，开发人员有时还需要为与React Native不兼容的组件编写额外的本机代码，有时候与本机组件相比，React Native组件变得更差。
5，对于功能简单，要求不高的app可以使用RN来编写，但是，对于复杂的，功能比较多的app就不建议使用，后期维护成本比较大。
网友评论