本篇文章只讲了浅显的用法,没有讲其原理。如果觉得有什么缺陷欢迎下面留言。
Android原生调用reactNative页面
首先我们来看下效果图
可以联想Android加载H5页面需要用到Webview这个控件加载,相同的Android加载ReactNative页面需要用到ReactRootView控件。只不过ReactNative需要配置的项要多一些。
为方便理解我先举个例子:我们知道深圳有注册一家名为百度的公司。如果我们要去百度,那么首先我们得知道深圳在哪。到了深圳我们才能去百度这家公司。这里我们把深圳(shenzhen)比作需要加载得ReactNative模块.js文件,把百度(baidu)看作是我们需要加载的ReactNative得模块名。如下图↓
我们需要注意的是在Android端
setJSMainModulePath("shenzhen")
中的shenzhen对应的是ReactNative中的shenzhen.js文件。mReactRootView.startReactApplication(mReactInstanceManager, "baidu", null);
中的baidu对应的是shenzhen.js文件中注册的模块名AppRegistry.registerComponent("baidu", () => Company);
中的baidu 。而这个Company就是我们最终要加载的页面Company.js.