开篇

尽管在移动开发中,原生APP的开发成本很高,但现阶段基于原生开发仍然是必须的,因为Web的用户体验仍无法超越Native,主要体现在:
(1)Native的原生控件有更好的体验
(2)Native有更好的手势识别
(3)Native有更合适的线程模型,尽管Web Worker可以解决一部分问题,但如图像解码,文本渲染仍无法多线程渲染,这影响了Web的流畅性。

React Native于F8大会开源,在短短不到一年的时间里,它成为手机端必不可少的开发模式之一.它充分利用了Facebook现有的业务轮子,其核心设计理念:既拥有Native的用户体验,又保留React的开发效率.
目前,React Native基本完成了对多端的支持,实现了真正意义上的面向配置开发:开发者可以灵活的使用HTML和CSS布局,使用React语法构建组件,实现:H5,Android,iOS多端代码的复用。

image.png

此外,使用流畅度和原生的保持在同一层次,这不是我们梦寐以求的开发模式吗?让我们从无到有开启新的学习篇章吧!

什么是React Native?

(一) 时下两大移动互联网主流技术

BAT等一线互联网公司的插件化,热修改等技术

React Native技术(2016年,随着Android版本的稳定,更加火爆)

(二)React Native介绍

Facebook于2015年9月15日发布React Native

广大开发者可以使用JavaScript和React开发跨平台移动应用

React Native提倡组件化开发:即提供一个个封装好的组件,组件相互嵌套,形成新的组件

(三) React Native的优势

3.1 跨平台开发

运用React Native,我们可以使用同一份业务逻辑核心代码来创建原生应用运行在Web端,Android端和iOS端;

React Native的优秀之处在于其吸取了各家跨平台解决方案的优点然后融于一体。

(1)通过JavaScript驱动原生代码，实现非常接近原生应用的体验；

(2)统一的开发语言和框架打破不同平台语言和机制不通用必须分别开发的障碍；

(3)更具革命性的是React Native基于React的设计思想，通过虚拟DOM、单向数据流，为我们带来了更加简单高效的开发体验。

3.2 追求极致的用户体验:实时热部署

3.3Learn once, write anywhere(最具魅力)

React Native不强求一份原生代码支持多个平台,所以不提"write once,run anywhere”(Java),提出了”Learn once, write anywhere“.

只需要学习React Native，我们就能够编写针对不同平台的应用，并且使用React Native框架开发相较于原生代码开发应用，更简单更高效。

通过React Native框架我们能够实现应用任意模块的更新，而不需要用户通过各种渠道下载安装包重新安装。修复线上bug也会变的非常及时。并且对应用的更新可以在静默的状态下完成，省去让用户等待的时间。

image.png

(四) React Native开发注意事项

4.1 目前React Native在iOS上仅支持ios7以上,Android仅支持Android4.1以上版本;

github地址:https://github.com/facebook/react-native

官方文档:http://facebook.github.io/react-native/docs/getting-started.html

4.2 由于React Native的版本更新速度很快,如果没有深厚的JavaScript基础,建议选择:

a. 功能适中,交互一般,不需要特别多的系统原生支持;

b. 对于部分复杂的应用,可以考虑原生+React Native混合开发

如果说ReactNative有什么劣势的话，首先就是学习成本比较高。

学习成本不仅仅包括需要学习React Native框架的使用，还包括对于不同平台原生应用开发能力的掌握。

由于目前的React Native框架还无法完全脱离原生代码独立完成大型应用的开发，所以要求开发人员即熟悉React Native框架的运用又有原生应用开发的经验。

React Native目前存在的问题：虽然Facebook官方宣传React Native具有原生应用相差无几的用户体验。但是实际开发中发现在一些对性能要求较高的情况下，React Native构建的UI在滑动过程中有明显的卡顿，远远不能达到60FPS的要求。

其次React Native框架目前仍然存在一些性能问题，比如ListView内存泄露的问题。而且React Native框架开发的应用通常要比原生应用占用更多的内存和CPU，这也意味着通过React Native构建的应用更耗电。

最后React Native作为一个刚刚开源的框架，虽然在github的热度很高，但是可用的UI组件不够丰富。第三方组件良莠不齐，很多组件都存在不同平台无法适配的问题。这也直接导致，尽管React Native是一个能够用于跨平台开发的框架，但是为保证一致的用户体验在一些情况下不得不针对不同平台编写不同的代码。

一. 环境需求

1.1安装Homebrew

Homebrew是Mac OSX的包管理器，我们需要通过Homebrew安装开发React Native的相关软件包。

安装方式:

ruby -e"$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

注意这里会出现一个问题:

会出现一个这样的语句Press RETURN to continue or any other key to abort

点击enter继续就好

命令行执行brew -v进行检查brew是否已经安装成功

1.2 安装npm 和 Node.js

Node.js最好安装4.0及其以上更高版本,node安装成功后,npm自动也就有了,直接下载安装Node.js, 网址:https://nodejs.org/en/download/

或者

brew install node

此方式需要将Xcode更新到8.0

1.3 安装WatchMan

watchman是Facebook用于监视JavaScript文件改动的开源项目,该插件用于监控bug变化和文件变化,并且可以触发指定的操作

安装方式:

brew install watchman

验证是否安装成功

image.png

1.4 安装flow

flow是Facebook开源的一个JavaScript静态类型检查器，建议安装它,以方便找出JavaScript程序中可能存在的类型错误

安装方式:

brew install flow

验证是否安装成功

(注意:如果提示command not found,请加上sudo获得最高权限)

(注意:如果提示command not found,请加上sudo获得最高权限)

二. React Native的安装

2.1安装react-native-cli。react-native-cli是React Native的命令行工具，安装react-native-cli后我们就能够通过react-native相关命令管理ReactNative工程。

安装方式:

npm install -g react-native-cli

验证是否安装成功

image.png

如果出现这种错误

image.png

三. iOS开发环境需求

Xcode7及其以上更高版本,如果你的电脑没有安装Xcode，请到AppStore下载最新版本。切记不要从任何第三方渠道下载！

注意

npm，是Node.js的模块依赖管理工具。React Native源代码以及开发React Native应用用到的第三方组件都可以通过npm进行下载安装。

四. Android开发环境需求

安装最新版的JDK:

下载安装地址:

http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

安装Android studio:

下载安装地址:

https://sites.google.com/a/android.com/tools/recent

先安装Android studio,然后打开终端, 输入vim ~/.bashrc,按enter后,

输入exportANDROID_HOME=~/Library/Android/sdk,然后按esc后,输入:wq,退出vim编辑器.

这种方式,可以省略以下4.1-4.3步骤,只需要从4.4开始执行即可,所以建议安装Android studio

4.1 安装Android SDK

安装方式:

brew install android-sdk

4.2 定义ANDROID_HOME环境变量

确保ANDROID_HOME环境变量指向你已经安装的Android SDK目录:

前往电脑的_/.bashrc,/.bash_profile或者你终端所用的其它配置文件中增加以下内容:

image.png

4.3 设置SDK

打开Android SDK Manager(Mac用户在终端下输入android)

选中以下项目:

Android SDK Build-tools version 23.0.1 (这个版本必须严格匹配23.0.1)

Android 6.0 (API 23)

Local Maven repository for Support Libraries (之前叫做AndroidSupportRepository)

点击”Install Packages”:

image.png

image.png

4.4 安装Genymotion

Genymotion是一个第三方模拟器,它比Google官方的模拟器更易设置且性能更好.但是它只针对个人用户免费.

(1) 下载并安装Genymotion

https://www.genymotion.com/

(2) 打开Genymotion,如果你尚未安装VirtualBox,它有可能会提示你安装

VirtualBox下载安装地址:

https://www.virtualbox.org/

(3) 打开Genymotion,创建一个模拟器并启动(需要在Genymotion的官网注册一个账号才可以打开)

image.png

image.png

五. React Native的第一个应用

5.1 执行命令,生成一个工程

react-native init 项目名称

选择一个目录位置，执行上述命令，终端出现如下信息说明工程已经创建完毕。

image.png

image.png

image.png

image.png

image.png

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

npm config set disturl https://npm.taobao.org/dist --global

5.2 AseeMyGoProduct就是我们创建的工程的名称。

5.2.1 到AseeMyGoProduct工程同名的目录下，进入ios目录，用Xcode打开AseeMyGoProduct工程，⌘+R运行。这时可以看到终端启动并且输出服务器启动的相关信息。

等待模拟器启动，可以看到一个Welcome to React Native界面，说明我们已经成功创建第一个ReactNative工程。

image.png

5.2.2 到AseeMyGoProduct工程同名的目录下，进入android目录，用Android studio打开android目录,等待时间会很长。

image.png

5.3 目录结构截图

目录结构分析:

(a) 默认生成android和ios两个平台的原生项目

(b) 其中,index.android.js和index.ios.js文件为Android和iOS的空壳应用文件

(c) 此外,node_modules文件夹,是为Node.js存放和管理npm包资源,也包含React Native框架文件

查看index.ios.js中的代码

image.png

六. 运行工程文件

不管是 iOS 还是 Android,在开发调试阶段,都需要在 Mac上 启动一个 HTTP 服务,称为Debug Server,默认运行在8081端口, APP 通过Debug Server加载 js

6.1 打开Xcode,运行你的第一个React Native创建的iOS应用

image.png

image.png

6.2 把React Native创建的应用跑在Android上

(a) 命令行执行cd AseeMyGoProduct,路径切换到项目主目录

(b)命令行执行react-native run-android,加载运行android应用

(c) 使用编辑器打开和修改index.android.js文件,接着通过菜单按钮选择Reload JS进行刷新修改

七. 管理React Native库的版本

在开发中,会经常的去控制React Native的版本库,得以适配各种条件下的开发,那该如何查看,控制React Native的版本呢?

7.1 查看本地的React Native库的版本

命令行输入react-native --version

命令行效果

image.png

7.2 更新本地的React Native的版本

命令行输入 npm update -g react-native-cli

7.3 查看react-native的npm包最新版本

NPM的全称是Node Package Manager, 是一个NodeJS包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准

npm包地址:https://www.npmjs.com/package/react-native

命令行查询 npm info react-native

查询效果

image.png

在项目中查看

image.png

7.4 升级或者降级npm包的版本

升级到当前最新 npm install --save react-native@0.36

降级到以前版本 npm install --save react-native@0.18

7.5 更新项目templates文件(可选)

新的npm包会包含更新在运行react-native init命令生成的一些动态文件,例如init创建项目的时候会生成iOS和Android的子项目,我们可以通过以下的命令进行获取最新的代码

命令行查询react-native upgrade

image.png

image.png

八. WebStorm设置React Native代码提示

8.1 从github上下载xml插件

git clone https://github.com/virtoolswebplayer/ReactNative-LiveTemplate

8.2 安装

将ReactNative.xml复制到 ~/Library/Preferences/WebStorm2016.1/templates,然后重启WebStorm.