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() 在调试模式下适用于 iOS 和 Android，但是一旦你构建了一个 Android apk 来发布，一切都会走下坡路。所以我将把它分解为后代的阶段，毫无疑问，未来的我。

对于设置，假设您的文件名为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文件以自动更新您的资产。所以继续打开你的 app build.gradle 文件，它位于android/app/build.gradle. 靠近底部的某个地方（其他task命令所在的地方）继续并放置：

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

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

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

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

因此，对于（可选）第 3 步）打开位于 的 proguard 设置文件android/app/proguard-rules.pro并将以下内容添加到其中：

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

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