React Native在APP开发中的应用研究

潘婷婷

（无锡城市职业技术学院，江苏 无锡 214000）

React Native在APP开发中的应用研究

潘婷婷

（无锡城市职业技术学院，江苏 无锡 214000）

目前，APP开发是移动互联网发展的重要内容，进行移动开发的方法也非常的多，如IOS，Android。文章介绍了一种新型的开发框架—React Native，用Java语言就能同时编写IOS，Android以及后台应用程序。相对传统开发方式，这种方式更加简单、便捷，且学习成本低廉。

React Native；APP开发；Java

1 APP发展概况

自从2007 年1月乔布斯揭开iPhone的面纱以来，移动时代的大潮滚滚向前，各种不同的系统平台，不同的技术路线，自然是层出不穷、迅猛发展业。如今，环境越来越社交化、开放化，消费者在移动APP应用上花费的时间超过移动Web，从数据上来看，应用程序APP不管是下载速度，还是创新速度，都在加快，移动应用程序扮演着至关重要的角色。目前，移动应用程序开发人员主要构建了3种类型的应用程序。

原生应用程序：是指能直接运行于当前操作系统（比如IOS或安卓）的应用程序，使用相应平台支持的开发工具和语言（比如IOS平台支持Xcode和Objective-C，安卓平台支持Eclipse和Java）。原生应用程序外观和性能都是最佳的。

HTML5应用程序：HTML5应用程序使用标准的Web技术，通常是HTML5，JavaScript和CSS。这种只编写一次、可到处运行的移动开发方法构建的跨平台移动应用程序可以在多个设备上运行。虽然开发人员单单使用HTML5和JavaScript就能构建功能复杂的应用程序，但是对于HTML5不论是苹果还是谷歌，没有那么多驱动力推动自己向HTML5发展。通过所谓中间件平台，无法和本地APP操作系统竞争。从整个实用和用户体验维度，不论是性能、耗电，HTML5都有很大缺陷。

混合应用程序：混合开发集原生和HTML5两者的优点（及缺点）。定义的混合应用程序是一种Web应用程序，主要使用HTML5和JavaScript构建而成，然后封装在细薄的原生容器里面，可通过容器来访问原生平台功能。

总之，原生应用程序提供了最佳功能和用户体验，有一些功能如多点触控、快速图形API、内置部件、说明文档等功能只有原生应用程序才能提供。但是原生应用程序的开发需要使用集成开发环境，对于初学者而言，无论是学习IOS还是安卓都是比较困难的，并且需要付出较大的成本代价。在这种环境下，Facebook推出了React Native开源框架，React Native应用能够为Windows，Xbox、智能电视和可穿戴设备编译使用。它的宣传语是“Learn Once，Write Any Where”，学习成本只有一次，却完成了所有开发角色的统一。

2 React Native的优势

2.1 环境配置简单

相比于原生开发，使用RN进行APP开发的环境配置尤为简单，只需要转好npm，RN-cli就可以开始初始化工程了。当然，如果是进行Android项目另外还需还装sdk等，IOS需要装XCode。

2.2 使用JS进行原生开发

原生APP开发是一种基于智能手机本地操作系统如Android，IOS和Windows Phone并且使用原生程序编写运行的第三方移动应用程序，可以最大程度地发挥特定智能操作系统的风格。但这种开发方式只能是针对某一种特定的操作系统进行开发，无法做到“跨平台”。一个程序员只能在一种平台上开发，无法做到同时并行。这样如果一个客户要求产品覆盖多个平台就要同时有多名程序员负责各自的APP应用开发。这样会耗费大量的人力物力。而React Native能够用JavaScript脚本就可以写出原生程序，极大地减轻了公司和人员的消耗。

2.3 热更新

React Native可以实现热更新，即不需要关闭服务器，直接重新部署项目就行了，对于程序编写是非常有利的。但是目前只是实现了js代码的热更新功能，局限性比较大，当原生代码更新了或者图片资源更新了，还是需要重新打包，提供用户下载安装。

3 React Native开发流程

3.1 环境搭建

（1）安装Hombrew（IOS系统上的一个安装包管理器，安装后可以方便后续安装包的安装），必要工具vpn通过终端运行命令。

ruby -e "$（curl -fsSL https：//raw.githubusercontent.com/Homebrew/install/master/install）"。

安装完毕，运行执行blew -v查看版本号，确定是否安装成功。

（2）安装nodes.js（服务端的JavaScript运行环境）

a.首先安装 nvm ，nvm使你可以同时安装多个版本的Node.js，并且在这些版本之间轻松切换。

安装-终端命令输入

curl -o- https：//raw.githubusercontent.com/creationix/ nvm/v0.30.1/install.sh | bash

这个过程其实就是 去https：//github.com/creationix/ nvm#installation 把一个install script xi运行

下载执行完毕后会提示你没有设置环境变量啥的，通过终端在根目录下建立一个.bashrc及./bash_profile

加入下面内容

export NVM_DIR="/Users/cbf/.nvm"

［ -s "$NVM_DIR/nvm.sh" ］ && ."$NVM_DIR/ nvm.sh" # This loads nvm

export ANDROID_HOME=～/Library/Android/sdk #这个是你的sdks环境变量

然后进入 .nvm 文件夹下执行 ./install.sh 即可安装成功

然后 nvm -v 查看是否安装成功

b.安装node，终端安装命令

nvm install node && nvm alias default node

安装完成后，通过 node 命令确定是否安装成功

（3）建议安装watchman（React修改source文件的一个工具）。

在命令行中输入brew install watchman。

（4）安装flow一个JavaScript 的静态类型检查器。

在命令行中输入brew install flow来安装flow。

（5）OS开发环境准备。

需要xcode 7以上，建议安装最新版本，否则有可能新建项目的时候编译不过。

（6）安装React Native CLI：用来开发React Native的命令行工具。

终端命令：

npm install -g react-native。

3.2 创建项目

以“HelloWorld”项目为例说明，React Native开发项目的流程

（1）新建项目。

在终端输入命令行

React-native init HelloWorld

（2）运行项目。

创建的项目包含Android和IOS两个版本。此处只介绍IOS的用法。用XCode打开ios/HelloWorld.xcodeproj文件，点击键盘“-R”或者点击"Run"，编译运行项目，会启动ReactNative服务和IOS模拟器。在IOS模拟器中可以看到如图1所示的界面。

图1 IOS模拟器中运行界面

4 结语

本文探讨了目前比较流行的APP开发框架React Native，从优点、使用的流程进行了研究，可以看出React Native对于初入门的程序开发者，对js，html熟悉的开发者有着极大的优势，可以使其快速地进入APP程序的开发。当然目前这个产品还在推广阶段，还有一些缺陷如兼容性问题、性能问题等，有待进一步应用后再讨论。

［1］吴文栋，孙玉涛.手机APP应用开发初探［J］.电子世界，2014（17）：123.

［2］刘明俊.基于手机客户端APP的移动学习资源开发研究［J］.软件导刊，2016（6）：104-106.

［3］汪永松.安卓手机APP开发套路之信息处理［J］.电脑编程技巧与维护，2014（20）：57-62.

［4］汤恺.原生APP和HTML5的混合开发模式在“浙江新闻”客户端中的实践［J］.传媒评论，2015（3）：65-68.

［5］陆钢，朱培军，李慧云，等.智能终端跨平台应用开发技术研究［J］.电信科学，2012（5）：14-17.

Research on the application of React Native in the development of APP

Pan Tingting

（Wuxi City College of Vocational Technology，Wuxi 214000，China）

At present，the development of APP is an important part of the development of mobile Internet，mobile development methods are also various，such as IOS and Android.This article introduces a kind of new development framework—the React Native that uses Java language can simultaneously write IOS，Android and the background application，which is more simple，convenient and relative to traditional development mode，it is of lower study cost .

React Native；APP development；Java

潘婷婷（1984—），女，江苏东台；研究方向：图像处理，模式识别。