ReactDemo2

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

go_to_baidu.gif

一·理解：

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

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

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

• 在ReactNative中的配置

  
  reactnative.jpg

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

  
  android.jpg

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

项目地址

项目下载后如何运行起来

1.用visual studio code打开工程依次执行以下命令

• npm install //下载依赖包；不下载的话运行不起来。
• yarn
• yarn start

2.用android studio将工程运行到手机上
3.reload App,如果还是加载不出来那么把app进程杀死重启，然后再重复操作1.步骤。
4.如果还是不行那么执行 react-native run-android命令。