此篇文章对React Native在实际项目开发中的介绍，React Native 在app开发中还需要哪些配套东西支持才能应用到实际项目中.开发React Native需要了解学习的技术，以及React Native的开发思维方式介绍。
目录
1.React Native 开发简要介绍
2.React Native 实际应用还需要哪些
3.代码演示
4.React Native 技术栈
5.自定义veiw和通讯协议实现
6.React Native 实现原理：js、java、c++三方面
7.React Native 开发与原生开发相比较
8.相关资料
1.React Native 开发简要介绍
1.1 开发工具: Nuclide、Atom、 WebStrom
Nuclide是官方推荐的开发工具。
Atom是前端同学常使用的开发工具，打开页面速度快。
WebStrom是使用的idea编辑器，经常用idea或者andorid studio的同学可以使用这个，就是开发工具相对重量级一些。适合打开一个项目编辑，每个页面打开一次编辑器的话还是推荐前两种。
1.2 调试工具：Chrome Log 、Dev Setting
Rn的调试的话，PC电脑作为rn代码的服务器，手机端连接到电脑端服务器，配置地址和端口号，就可以加载页面，Android手机调试Rn代码的话，需要将andorid的rn代码设置成Debug模式，然后在Rn页面摇一摇就会出来一个菜单，选择重新加载页面，就会重启请求服务器代码，加载修改过的程序。一般打印log方式的调试时使用的Chrome 浏览器的console输出Rn中打印的日志
Rn代码：
console.log("此种方法输出react代码调试日志");
image.png
在Chrome展示的黑色背景网页不用关心，只关心log日志就好，Rn没有渲染到Chrome中。
Rn的断点调试也是在Chrome中设置断点，进行断点调试了。
有了log打印和debug基本的调试代码就可以了。
还有一个比较高级的调试工具就是在手机端的Dev Setting ，这个大家可以使用学习Rn一段时间之后再去研究这个工具，知道这个性能调试工具就好。
image.png
image.png
1.3 适配多端：android、Ios
一般开发客户端技术都需要适配，不管是浏览器适配还是手机版本适配，Rn开发要考虑适配Android手机和Ios手机。
这个适配，如果以前是做移动端开发的，那就要增加适配的成本，或者封装使用一些适配好的控件来开发应用。这个前期是有一定成本的，当开发过一两个Rn项目后，成本就会降低很多。另外Rn目前还没有找到比较好的可以同时生成android、ios以及Web或者H5的框架。
2.React Native 实际应用还需要哪些？
- 1 RN封装控件、js端和native端共同实现
- 2 RN代码打包命令工具（zip包）
- 3 RN SDK增加包下载、解压、版本比对
- 4 RN后台管理系统-包上传、版本配置管理
3.代码演示
rn的程序代码是js嵌套标签的形式，css样式是以一个StyleSheet.create的形式
import React, { Component } from “react“”;
import { AppRegistry, StyleSheet, Text, View } from 'react-native';
export default class LotsOfStyles extends Component {
render() {
return (
<View>
<Text style={styles.red}>just red</Text>
<Text style={styles.bigBlue}>just bigBlue</Text>
<Text style={[styles.bigBlue, styles.red]}>bigBlue, then red</Text>
<Text style={[styles.red, styles.bigBlue]}>red, then bigBlue</Text>
</View>
);
}
}
const styles = StyleSheet.create({
bigBlue: {
color: 'blue',
fontWeight: 'bold',
fontSize: 30,
},
red: {
color: 'red',
},
});
4.RN技术栈
Jsx：rn代码是js代码中嵌套标签的语法，这个代码并不是纯正js语法，叫做jsx，是需要经过编译之后生成标签和js语法。
Component：Rn中的组件，让js和html有了封装的概念，可以复用组件。对于java、c++的工程师，就是组件的封装，觉得这个没有什么高级，但是对于前端工程师可以体会这个组件复用的价值，因为原来html是不能自定义标签的，复用代码变得很麻烦。
虚拟DOM（Virtual DOM）：在浏览器端用Javascript实现了一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每当数据变化时，React都会重新构建整个DOM树，然后React将当前整个DOM树和上一次的DOM树进行对比，得到DOM结构的区别，然后仅仅将需要变化的部分进行实际的浏览器DOM更新。而且React能够批处理虚拟DOM的刷新，在一个事件循环（Event Loop）内的两次数据变化会被合并。
Diff算法：将rn中的组件进行比较，使用的diff算法，而并不是全部dom的比较。这里要说一下，rn还是偏前端的技术，很多技术都是从html、js、dom的思想中发展而来的。
自定义view：就是rn中有了组件的概念，可以封装自己想要的view了，这里说的自定义只是js代码对view封装，还有一种自定义view，是Native和React共同实现的自定义view，下面会讲到。
5.自定义Veiw和通讯协议实现。
React与Naitve通讯
JMReactPackage、自定义createNativeModules、
自定义createViewManagers、消息通讯 Emitter。
rn的通讯一共有三种，第一种是上面的react和native两端实现自定义view。第二种是自定module，可以实现react调用native的代码，并返回结果或者回调，第三种是native主动给react发送消息emitter。
自定义View
rn除了js代码封装的自定义view以外，还有一种是，js封装一个view，native需要对应的实现这个view（native是指的ios和andorid客户端），这样js和native共同实现一个view，这也是rn的一大特点，可以开发多端，有些复杂的view或者封装一些程序代码组件，使用这种方式，会减少开发业务的工作量，一些核心技术或者封装度高的业务代码，稳定性高的的业务代码使用native实现，经常修改的业务react代码实现，是个不错的方式。可以发挥两者的所长。
6.RN实现原理：js、java、c++三方面
这里以android端的实现来介绍：
Java层：该层主要提供了Android的UI渲染器UIManager（将JavaScript映射成Android Widget）以及一些其他的功能组件（例如：Fresco、Okhttp）等。
C++层：该层主要完成Java与JS的通信以及执行解析JS代码工作。
JavaScript层：该层提供开发者使用的组件以及工具库。
RN三层实现原理.png
7.rn开发与原生开发相比较
1.使用React语法（JavaScript+CSS）开发，有一定学习成本。
2.相对较原生发版本容易、便捷。
3.兼容性要考虑ios和andorid两端。
4.页面的生命周期发生变化，使用rn的生命周期开发程序。
5.原生的api不能直接使用，可以使用对原生封装给rn使用。
6.调试容易、方便、速度快。
8。相关资料
React Native 中文版
https://reactnative.cn/
React Native 英文版
http://facebook.github.io/react-native/docs/getting-started.html
阮一峰 ReactJs
http://www.ruanyifeng.com/blog/2015/03/react.html
React Native 资源
https://github.com/jondot/awesome-react-native
网友评论