React Native
1.0、参考
1.1、React Native简介

React Native是Facebook开源的基于React技术进行开发移动应用的技术。

React Native着力于提高多平台开发的开发效率 —— 仅需学习一次，编写任何平台。 (Learn once, write anywhere)， 要注意的是：他的目标是让开发不同端的语言变成一样的语言，都使用JSX，降低学习成本。 他的目的不是White once, run anywhere，对于Android和iOS要分别开发，因为他们的UI控件是不一样的，当然有公共的部分。

React Native开发的应用并不是运行在WebView中， 而是通过JavaScript engine将DOM元素与原生控件进行映射，最终使用原生控件渲染的，所以相比WebView运行是流畅， 但是由于存在中间的JavaScript engine翻译的过程，所以，没有完全使用原生开发的应用流畅。

2013年Facebook开源了React。

2015年Facebook召开的F8大会上把iOS版的React Native开源了。

2015/09月/15又正式开源了React Native For Android。 意味着React同时支持了各大主流平台。 真正做到了learn once，write everywhere！

React Native官网：http://facebook.github.io/react-native

React Native中文网：http://reactnative.cn

React Native在GitHub上的网址：https://github.com/facebook/react-native

1.2、搭建React Native开发环境

React Native开发环境只能搭建在macOS系统之上。 这是因为，我们搭建的React Native工程，既有iOS工程， 也有Android工程，iOS工程只能在macOS系统中操作。

1、安装watchman、JDK（推荐AdoptOpenJDK）、AndroidSDK、AndroidStudio、Xcode、command line developer tools、CocoaPods、Node.js

2、设置npm仓库使用国内的镜像：

npm config set registry https://registry.npm.taobao.org

3、使用npm全局安装flow、react-native-cli：

npm install flow react-native-cli -g

4、检验是否安装成功。查看react-native命令的帮助：

1.3、创建React Native工程

使用react-native init命令创建工程：

react-native init ReactNativeTest

这个过程需要从npm仓库下载很多模块，所以过程可能会比较慢，请耐心等待。

完成后，进入工程，查看文件内容：

工程结构说明：

package.jsonnpm包的配置文件
babel.config.jsbabel的配置文件
metro.config.jsmetro的配置文件
node_modules项目依赖的npm包存放目录
androidAndroid工程，与Android原生开发的工程一模一样。
iosiOS工程，与iOS原生开发的工程一模一样。
index.js程序的入口
App.js被index.js调用

在此工程目录中查看react-native命令的帮助：

我们发现，在工程内部和工程外部react-native命令的帮助是不一样的。

运行iOS程序：

react-native run-ios

这个命令做了如下4件事情：

  • 启动了一个Metro Bundler服务，这个服务监听了一个端口，默认是8081， 这个端口很可能被占用，您可以换成其他端口，在metro.config.js进行配置。
  • 启动了一个watchman服务，这个服务实际上是注册给系统一个回掉， 当您的工程目录下有文件发生改变了，就会重新部署，俗称的热部署。
  • 启动了一个iOS模拟器。
  • 编译iOS工程的代码，安装到iOS模拟器中。

运行效果如下：

运行Android程序：

react-native run-android

这个命令会自动编译程序，完成后会尝试安装，所以应该事先连接上Android设备，如下：

以后，我们可以像开发Node.js程序一样进行开发了。

1.4、React Native开源项目