android - react native - webview 在构建发布 apk 时不呈现本地 html

Question

我在 webview 中为我的应用程序呈现本地 html，它在 iOS 和 Android 上都运行良好。这是一个嵌入了 svg 标签的 html。

但是当我在 Android 上生成一个 apk 并尝试在我的手机上本地运行时，它就是不呈现。

即使导出 .ipa 文件也能在 iOS 上正常运行

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>

Answer 1

好吧，这是一个复杂的问题。基本上，require() 在 Debug模式下适用于 iOS 和 Android，但是一旦你构建了一个 Android apk 用于发布，一切都会走下坡路。因此，我会将其分解为子孙后代的阶段，毫无疑问， future 的我。

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

所以第 1 步)您需要更新您的 <WebView />考虑到跨平台支持的组件:

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 存储和你需要启用 javascript(除非你不这样做没关系)。显然，javascript 在 iOS 上默认启用，在 Android 上默认禁用。

source 在这里做的是，如果平台是 iOS，我们只需要正常的文件，一切都适用于 dev/prod。但是，对于 android，我们需要告诉它从 android 的默认 android 存储位置加载文件，即 file:///android_asset/。 .此文件直接对应于位于 android/app/src/main/assets/ 的文件夹这是您可以复制的地方 your.html到。所以它看起来像android/app/src/main/assets/your.html .

此时一切正常 - 然而，您可能会发现直接复制文件难以置信很烦人。至少，我做到了。

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

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

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

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

就是这样!有点，它应该适用于大多数用例，但关于 android 和使用 ProGuard 缩小你的构建还有另一个奇怪的事情。基本上，如果你想使用它，你需要确保保留 your.html完好无损。

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

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

就是这样，一切都应该设置为您使用 WebViews crossplatform。我真的不能把这篇文章归功于我，因为我只是从 https://github.com/facebook/react-native/issues/16133 中拼凑了一堆人的解决方案。 .尤其是，Arshiamidos 和 scottschmitz 的解决方案最具启发性。我建议我们都去给他们买杯啤酒 :)。