混合开发能不能使用反应

  介绍

小编给大家分享一下混合开发能不能使用反应,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

使用本机可反应以进行混合开发,因为RN和反应使用了相同的开发语言JavaScript和相同的设计理念反应,在反应的基础上添加了原生平台的底层支持,这样不同平台的适配就交由RN去处理。

随着反应的盛行,其移动开发框架反应本地也收到了广大开发者的青睐,以下简称RN。通过RN我们能够使用JavaScript语言来实现跨平台移动应用的开发,打开了前端工程师通往移动平台的大门。用RN官方的介绍来概括它的特点就是:学习alt="混合开发能不能使用反应">

上方我们不难看到一些很熟悉的语反应法,但除此之外我们还能看到其引入了react-native库中的AppRegistry API和文本(文本)组件,这便是RN提供给我们用于调用原生平台的API和组件,其能够在不同移动设备上实现一致的功能和逻辑。最后展示在应用中的便是Hello world文本,而至于AppRegistry API后面会做相应介绍。

2。解刨反应本机应用的结构

那么看完Hello world示例后,我们应该大致知道了RN应用的一个结构,我们用图例的方式进行解刨说明,如下图所示:

混合开发能不能使用反应”> </p> <p>从图中可以看到,我们整个RN的应用可以分为两层展示:</p> <p> JavaScript代码层</p> <p>本地代码层</p> <p>也可以理解为所谓的应用层和底层。应用层通过JavaScript桥接层与底层平台进行交互,获取底层平台的原生API,用户界面组件及一些自定义组件等。比如Hello world示例中引入的AppRegistry API和文本组件便是很好的说明。</p> <p>这样的分层能够使应用层的开发变得简单、高效和跨平台,对于应用的稳定性,运行时的性能来说将和原生平台保持接近。</p> <p> 3。原生平台调用反应本地组件</p> <p>大致了解完本机应反应用的结构后,我们不妨再来认识下原生平台是如何调用反应本地组件的。我们RN的代码要跑在原生应用中那必然需要原生应用加载运行对应的RN组件,以实现混合开发和交互的功能。这里就要来介绍下刚刚搁置的AppRegistry API了。</p> <p> <img src=

一般我们的RN项目都会有一个入口文件,比如index.js(老版本会存在两个:index.ios。js和index.android。js)用于注册根组件并提供给原生平台运行。这里的注册根组件就要通过AppRegistry API来实现。

我们需要在根组件里调用AppRegistry中的registerComponent方法进行组件的注册。注册完之后原生平台便可以通过runApplication方法来运行注册过的根组件。需要注意的是注册和运行的组件名称两者必须保持一致,这样才能够实现加载对应的组件。比如Hello world示例中我们注册的根组件名为HelloWorldApp,并且注入相应的组件模块。另外同时一个入口文件中,我们也可以注册多个根组件。

4。原生加载反应本地界面

刚刚在介绍原生平台调用RN组件时提到了加载对应根组件的功能,那么是不是原生平台只有通过不断的调用运行RN注册的根组件才能实现不同页面的首次加载呢(这里的加载指原生打开RN页面)?答案是否定的。

混合开发能不能使用反应

除了上述通过调用不同的根组件来实现原生打开不同的RN界面外(图中第二点),我们还可以调用一个根组件来实现。唯一的区别在于我们需要调用时在initialProperties中添加区分不同界面的标识位来渲染不同的组件,就好比在URL上携带不同参数跳转到同一路由一样,根据路由上的参数在应用层进行对应组件的渲染。

在RN根组件中我们可以通过这个。道具获取原生平台携带过来的参数对象,如示例中的viewName,再根据viewName实现RN内部组件的渲染,当然也可以结合react-navigation来实现路由模块的切换。至于最终选择哪种方式加载,决定权还是要看业务的划分和功能的定义。相比较而言第一种可能更加灵活和便捷。

5。本机与反应原生平台通信原理

在混合开发模式下,我们不可避免的需要和原生平台进行数据的通信,那么在RN中,我们如何与原生平台进行通信呢?如何获取原生平台提供的数据或将数据传递给原生平台呢?下面这张图便介绍了这一流程。

混合开发能不能使用反应