如何在Android WebView中集成ReactJS？适配现有开发场景

嘿，我来帮你理清怎么在你现有的WebView项目里集成ReactJS，其实流程很直观，咱们一步步来：

1. 准备你的React项目 #

• 如果你还没有React项目，先初始化一个：npx create-react-app my-react-app
• 开发你的React组件，要是需要和Android原生交互，提前预留好调用原生方法的逻辑就行——比如后续你可以通过window.android.xxx()调用你之前注册的JS接口方法。

2. 把React项目打包成静态资源 #

• 进入React项目根目录，运行npm run build，这会生成一个build文件夹，里面包含了所有可以直接运行的静态文件（index.html、打包后的JS/CSS、图片等）。

3. 替换Android项目里的本地资源 #

• 把build文件夹里的所有文件，复制到Android项目的app/src/main/assets目录下（直接替换原来的webview.html就行，或者你也可以新建一个子文件夹比如react，把静态文件都放进去，这样能和原来的资源区分开）。
• 修改WebView加载的URL：
  • 如果静态文件放在assets根目录：myWeb.loadUrl("file:///android_asset/index.html");
  • 如果放在react子文件夹：myWeb.loadUrl("file:///android_asset/react/index.html");

4. 处理React与Android原生的交互 #

• 因为你已经通过addJavascriptInterface注册了JS接口，在React代码里直接调用对应的方法就好。比如你的接口对象挂载在window.android上，那在React组件里可以这么写：

  // 调用原生方法
  window.android.yourNativeMethod();
  

• 小提醒：React打包后的代码会被压缩混淆，为了避免方法名被改坏，你可以用字符串形式调用：window['android']['yourNativeMethod']()

5. 优化WebView配置（可选但推荐） #

• 如果你用了React路由（单页应用），记得设置WebViewClient来拦截内部路由，不让它跳转到系统浏览器：

  myWeb.setWebViewClient(new WebViewClient() {
      @Override
      public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
          view.loadUrl(request.getUrl().toString());
          return true;
      }
  });
  

• 开启DOM存储（很多React应用需要这个来保存状态）：

  myWeb.getSettings().setDomStorageEnabled(true);
  

开发调试小技巧 #

开发阶段你不用每次都打包React代码，直接让WebView访问React开发服务器的地址就行——比如Android模拟器可以用http://10.0.2.2:3000（这是模拟器访问本地电脑的默认IP），修改React代码后刷新WebView就能看到效果，效率高很多。

内容的提问来源于stack exchange，提问作者jellybean