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

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

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

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

2013Facebook开源了React

2015Facebook召开的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 NativeGitHub上的网址:https://github.com/facebook/react-native

1.2、搭建React Native开发环境

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

1、安装watchmanJDK(推荐AdoptOpenJDK)、AndroidSDKAndroidStudioXcodecommand line developer toolsCocoaPodsNode.js

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

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

3、使用npm全局安装flowreact-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.jsindex.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开源项目