陈磊

（WalmartLabs 加利福尼亚州森尼维尔市 94086）

React Native 的思路就是在不同平台下使用平台自带的UI 软组件。它的优点是性能体验高于Hybrid，不逊色于原生，这种模式和Hybrid 有极大的差异。Hybrid 的view 层实际上是dom，但这种模式的view 层是虚拟dom，所以性能高于Hybrid，这种模式是由JS编写而成的，它有独特的语法，所以只需要一次学习就可以同时开发Android 和iso，这个模式是由Facebook 统一发起的，所以在一个统一社区内有较好的资源。但是它也存在着无可避免的一些缺点，是不同平台代码有所区别，这种模式实际上还是来源于JS 的写原生，所以android 和ios 中的原生代码会有所区别，对开发技术人员有一定的要求。

1 跨平台开发的概念

跨平台主要是为了解决不同操作系统间软件转移的问题，简单理解就是一个虚拟的技能能够解决同一段代码在不同平台的运行效果。但是移动平台计算资源紧张，所以直接应用Java 和web 到移动平台是不可行的，Hybrid 这种方法被提出，这它是利用本地软件框架来运行远程web 内容，在应用的过程中，它能够对本地资源进行访问，但是这种方法的执行效率很低，在切合本地程序具有差异性等诸多原因造成了开发的效率很低。因此利用这种方法无法有效保障跨平台开发的有效进行。另外一种借助编程语言编程生成不同平台程序的方法有效地解决了跨平台问题。这种方式在解决跨平台问题中非常有利，在使用过程中会增加一些辅助程序，但是它的执行效率和本地原生的程序是一样的。通用编程语言编程生成不同平台本地程序的方法中，最有效的方法就是React Native。

2 React Native的技术的优缺点

React native 技术的优势就是调试简单，IPA 安装好后不需要再进行过度的翻译，只需要reload，就可以在云服务器下载JS 代码，呈现改变代码之后的效果。在调试的时候非常方便，修改代码之后，保存页面就会跟随着修改的结果进行变化。它的CSS—layout 布局降低了学习成本，减少了代码量，但是ios 或android 开发者在刚接触的时候需要做出一些改变来适应这种技术变化。跨平台无论是android 或是ios 系统编写出一套代码就能够在不同平台上进行应用，有Facebook 作为强大资源支撑在未来，有强劲的发展前景。

图1：React Native 架构图

图2：React Native 程序通信机制

但是React native 存在着一些不足，由于是脚本的语言，虽然有诸多优点，但调试起来非常的不便捷，不容易查错。在官网上对文档的介绍非常粗糙，缺乏对细节的描述，如果遇到了难以解决的问题，无法找到对应的解决方法。它的升级非常困难，比如将React native 从0.42 版本升到最近的0.5 版本，就需要全部更新，然后对相关的控件进行升级，统一调整，这样会花费大量的精力。

3 React Native方法的说明

3.1 React Native的介绍

这种利用React Native 来进行移动跨平台开发的方法，是在2015年由Facebook 公司推出的程序库。在当前的web UI 领域取得了巨大的成就，主要是符合当前创新化的发展背景，改变了人们对传统移动开发平台的印象。React Native 的实例说明，它已经在多项平台中得到了应用。在这个过程中，涉及到了JSX，JS 语言中结合了HTML 和CSS 元素，这种被扩展的Javascript 语言就被称为是JSX 语法。javascript 内存中维护了一个Virtual DOM，与真实显示DOM 保持相对应关系，当界面发生变化时，由于效率极高的DOM 算法就避免重新绘制。同时在使用过程中，组件也可以用好几种方式表明，可以是一个包含render 方法的类，也可以是一个简单的函数，通过属性Props 和状态state 传递数据。同时只要更新组件state，然后根据state 重新渲染用户界面，就不用再次操作DOM，Props 是不可改变的，子组件只能通过props 传递数据。React Native 的安装和运行有特殊的环境：node （version>10）；brew install node；Watchman ；brew install watchman；react-natviecli ；npm install -g yarn react-native-cli。在react native 使用过程中，只有满足以上的运行或安装特殊环境要求，才能够有效地进行使用。

3.2 Javascript编程语言

它作为一种高级解释型的编程语言，是以原型和函数先行的语言支持面向对象编程命令式编程及函数式编程。常用的库有jQuery、JSer、dojo、prototype 等。Javascript 是React Native 的编程语言，这种语言简单易学，它是在外部初期就已经存在的一种脚本语言。但是在开始的时候，只是作为一种web 动态化的辅助性语言而使用的。但是javascript 最大的特点就是发展，它能在普通中迸发出创造力。在21世纪初期，Ajax 概念被提出，这种编程方式让人们发现了网页编程还有如此创新的方法。当前非常多的创新化编程概念都能在javascript 中得到体现，Javascript 发展到当今时代，已经在计算机的诸多领域进行了应用，成为当前最受欢迎的编程语言之一。

3.3 React Native构架以及优化

React Native 利用各移动平台自身优势完成了跨平台开发，避免了重复制造的情况出现。主要构架如图一所示。APP 程序可以通过React 访问React Native，然后通过javascript 运行库移动操作不同的程序。当程序运行的过程中，可以对不同的渠道灵活选择，满足程序要求。它之所以能够操作Android 的和ISO 程序，主要是由于利用中间桥javascript 沟通，完成它们之间的交互，中间桥作为一个有效的沟通渠道，实现了本地语言和javascript 之间的沟通。如图2所示，通过中间桥，本地语言Java object—c 和javascript 之间可以实现一个互动。

现有的架构它存在一些局限性，例如不能将javascript 的逻辑直接和许多需要同步的Never API 集成，也无法让React Native 应用调用native 实现函数，还存在着不必要的复制。对React native构架的优化，需要对每一层进行相应的调试优化，React 层增强javascript 安全，javascript 层引入JSI 能够让它替换不同的javascript引擎，Bridge 层划分为Fabric and toTurboModules 部分，分别对于UI 渲染和Native 模块。Native 层精简核心模块，将非核心独立作为社区进行更新维护。

4 系统实现说明

React Native 的编程语言采用的是javascript 扩展版本的JSX，所以它的程序采取JS 为命名。利用render 函数生成相关界面，用state 维护界面，同时在不同模块之间输出的语句能够进行重复使用。在这个过程中，所涉及到的内容主要通过系统在android 中的实现效果进行相关的分析研究。准备工作在系统启动前要全部做好，如下装好代码：

The first step : _Load resource synchronous = asynchronous()=>{

Then: Promise of return.all([

Furthermore: Asset.Load asynchrony

Next: require('./assets/images/mail1.png'),

Then: Same code as last step

The sixth step: Font.loadAsync

The seventh step: Ionicons.font,

The eighth step : {'space-mono':require('./assets/fonts/

SpaceMono-Regular.ttf') },

The last step: ]),]); };

通过以上的异步装入代码，能够看到这主要利用EXPO 的ASSET 模块，提高后续程序的访问效率。在完成该步骤的相关工作之后，要进一步的进入到切入界面，建立导航器进行后续的界面切换工作，在这个过程中所需要进行的代码如下图所示:

The first step: export const RootStackNavigator=StackNavigat

or(

Then: {Lg:{screen:LgScreen,},

Furthermore: PageFace:{screen:PageFace,},

Next: Settings:{screen:SettingsScreen,},

Eventually: }

在以上代码中，有Lg，PageFace ，Settings，三大项导航器，这分别指向了三个界面，这三大项的导航器也只入了三个界面，操作程序只需要简单敲好代码即可。

5 结束语

React native 可以多平台共用，像网页一样随时更新，随时发布。受到了诸多公司和开发人员的推崇，它能够提高程序开发的工作效率，又能帮助公司有效缩小成本，这会成为一个优秀的框架在未来的软件开发中。这种程序能够被有效应用，一次编写就能够在多个移动平台进行应用，最重要的是它的运行效率和本地程序完全相同。在这些优点下。利用React native 跨平台移动APP 开发方法节省了开发的人力时间成本，能够在当前社会得到广泛的应用。