Skip to content

LuffyHope/ReactDemo2

Folders and files

NameName
Last commit message
Last commit date

Latest commit

848c0a7 · Sep 20, 2019

History

5 Commits
Sep 20, 2019
Sep 20, 2019
Sep 20, 2019
Sep 20, 2019
Sep 20, 2019
Sep 20, 2019
Sep 20, 2019
Sep 20, 2019
Sep 20, 2019
Sep 20, 2019
Sep 20, 2019
Sep 20, 2019
Sep 20, 2019
Sep 20, 2019
Sep 20, 2019
Sep 20, 2019
Sep 20, 2019
Sep 20, 2019

Repository files navigation

ReactDemo2

本篇文章只讲了浅显的用法,没有讲其原理。如果觉得有什么缺陷欢迎下面留言。
Android原生调用reactNative页面
首先我们来看下效果图
Alt

一·理解:

可以联想Android加载H5页面需要用到Webview这个控件加载,相同的Android加载ReactNative页面需要用到ReactRootView控件。只不过ReactNative需要配置的项要多一些。

二·我们怎样去调用react页面?代码中需要配置哪些参数?

为方便理解我先举个例子:我们知道深圳注册一家名为百度公司。如果我们要去百度,那么首先我们得知道深圳在哪。到了深圳我们才能去百度这家公司。这里我们把深圳(shenzhen)比作需要加载得ReactNative模块.js文件,把百度(baidu)看作是我们需要加载的ReactNative得模块名。如下图↓

  • 在ReactNative中的配置 Alt
  • 在Android的配置 这就是android高铁站 我们需要从这里出发去百度总部 Alt

我们需要注意的是在Android端setJSMainModulePath("shenzhen")中的shenzhen对应的是ReactNative中的shenzhen.js文件。mReactRootView.startReactApplication(mReactInstanceManager, "baidu", null);中的baidu对应的是shenzhen.js文件中注册的模块名AppRegistry.registerComponent("baidu", () => Company);中的baidu 。而这个Company就是我们最终要加载的页面Company.js.

About

Android原生调用reactNative页面

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published