反应本机-构建发行版APK时，webview不会呈现本地html [英] react native - webview does not render local html when building release apk

问题描述

我已经在我的应用程序的webview中渲染了本地html，这在iOS和Android上都表现出色.这是一个嵌入了svg标签的html.

I have rendering local html in webview for my application, it was going great on both iOS and Android. It's an html with svg tags embedded.

但是，一旦我在Android上生成了一个APK并尝试在手机本地运行时，它就不会渲染.

But as soon as I generated an apk on Android and tried running is locally on my phone, it just doesn't render.

即使导出.ipa文件，在iOS上也能很好地工作

Works well on iOS even when .ipa file is exported

const VECTOR_BODY_HTML = require('../custom_views/vector-body.html');
...
         <WebView
           ref={component => this.mWebView = component}

           automaticallyAdjustContentInsets = {false}
           contentInset={{top:0 , left:0 ,bottom:-20, right:0}}

           source = {VECTOR_BODY_HTML}
           scalesPageToFit = {false}

           onLoad = {() => {
               this.updateBodyViewBox(bodyWidth, bodyHeight);
               this.initColorMap();
               this.populateBodyMap(15)
             }
             }
           onMessage = {(data) => {this.onMessage(data);}}

           style = {{height:bodyHeight}}
          >
          </WebView>

推荐答案

好的，所以这是一个复杂的问题.基本上，require()可以在调试模式下与iOS和Android正常运行，但是一旦构建了可发布的Android APK，一切都会艰难.因此，我将把它分解为后代的各个阶段，毫无疑问，我会成为我的后代.

Ok so this is a complex issue. Basically, require() works fine with iOS and Android in debug modes but once you build a Android apk for release everything goes downhill. So I'll break this down into stages for posterity and, without a doubt, future me.

对于设置，我们假设您的文件名为your.html并且位于您的src/assets/your.html文件夹中.

For setup, let's assume your file name is your.html and that it's located in your src/assets/your.html folder.

因此，第1步)您需要在考虑跨平台支持的情况下更新您的<WebView />组件:

So step 1) You'll need to update your <WebView /> component with cross platform support in mind:

import {Platform, WebView} from 'react-native';    

<WebView
  source={Platform.OS === 'ios' ? 
    require('../src/assets/your.html') :
    {uri: 'file:///android_asset/your.html'}
  }
  domStorageEnabled
  javaScriptEnabled
/>

所以这里发生的是，您需要告诉android允许访问dom存储，并且您需要启用Java脚本(除非您不这样做就可以了).显然，JavaScript在iOS上默认启用，在Android上默认禁用.

So what's going on here is that you need to tell android to allow access to dom storage and that you need javascript enabled (unless you don't then it's fine). Apparently, javascript is enabled by default on iOS and disabled by default on Android.

这里的来源是，如果平台是iOS，我们通常只需要文件即可，所有内容都适用于dev/prod.但是，对于android，我们需要告诉它从android的默认android存储位置file:///android_asset/加载文件.该文件直接与位于android/app/src/main/assets/的文件夹相对应，您可以在其中将your.html复制到该文件夹​​.因此看起来像android/app/src/main/assets/your.html.

What source is doing here is, if the Platform is iOS, we just require files normally and everything will work for dev/prod. However, for android we need to tell it to load the file from the default android storage location for android which is file:///android_asset/. This file corresponds directly with the folder located at android/app/src/main/assets/ this is where your can copy your.html to. So it would look like android/app/src/main/assets/your.html.

此时一切都将正常工作-但是，您可能会发现难以置信直接复制文件很烦人.至少我做到了.

And everything will work at this point - however, you might find copying your files directly incredibly annoying. At least, I did.

因此对于步骤2)，您可以升级您的应用程序build.gradle文件以自动更新您的资产.因此，继续打开位于android/app/build.gradle的应用程序build.gradle文件.往底部的某个地方(其他task命令所在的地方)继续并放置:

So for step 2) you can upgrade your app build.gradle file to automatically update your assets. So go ahead and open your app build.gradle file located at android/app/build.gradle. Somewhere towards the bottom (where other task commands are) go ahead and put:

task copyReactNativeHTML(type: Copy) {
  from '../../src/assets/'
  into 'src/main/assets'
}

gradle.projectsEvaluated {
  bundleDebugJsAndAssets.dependsOn(copyReactNativeHTML)
  bundleReleaseJsAndAssets.dependsOn(copyReactNativeHTML)
}

现在您应该能够将文件自动复制到正确的资产文件夹中，以便可以通过android_asset从javascript访问它们.

And now you should be able to have your files automatically copied into the correct assets folder so you can access them from javascript via android_asset.

就是这样！有点，它应该适用于大多数用例，但是关于Android和使用ProGuard最小化您的构建还有另外一件奇怪的事情.基本上，如果要使用它，则需要确保保持your.html不变.

And that's it! Kind of, it should work for most use cases but there is another strange thing about android and minifying your build with ProGuard. Basically, if you want to use it you need to make sure to keep your.html unmangled.

对于(可选)步骤3)，打开位于android/app/proguard-rules.pro的proguard设置文件，并添加以下内容:

So for (optional) step 3) Open your proguard settings file located at android/app/proguard-rules.pro and add to it the following:

-keepclassmembers class fqcn.of.javascript.interface.for.webview {
  public *;
}

仅此而已，应设置所有内容以使用WebViews跨平台.我真的不能为这篇文章赞誉，因为我只是从 https://github.com/facebook/react-native/issues/16133 .尤其是Arshiamidos和scottschmitz解决方案最具启发性.我建议我们大家去给他们买啤酒:).

And that's it, everything should be set for you to use WebViews crossplatform. I can't really take credit for this post as I just cobbled together a bunch of peoples solutions from https://github.com/facebook/react-native/issues/16133. In particular, Arshiamidos and scottschmitz solutions were most enlightening. I'd suggest we all go buy them a beer :).

这篇关于反应本机-构建发行版APK时，webview不会呈现本地html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！