Android react native-webview在构建版本apk时不呈现本地html

我已经在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>

const VECTOR_BODY_HTML=require（'../custom_views/VECTOR BODY.HTML'）；
...
this.mWebView=组件}
automaticallyAdjustContentInsets={false}
contentInset={{top:0，left:0，bottom:-20，right:0}
source={VECTOR_BODY_HTML}
scalesPageToFit={false}
onLoad={（）=>{
此.updateBodyViewBox（车身宽度、车身高度）；
this.initColorMap（）；
这是《大众饮食地图》（15）
}
}
onMessage={（数据）=>{this.onMessage（数据）；}
样式={height:bodyHeight}}
>

好的，这是一个复杂的问题。基本上，require（）可以在调试模式下与iOS和Android配合使用，但一旦你为发布版构建了一个Android apk，一切都会走下坡路。因此，我将为子孙后代，以及毫无疑问的未来我，将此分为几个阶段

对于设置，假设您的文件名是

your.html

，并且它位于

src/assets/your.html

文件夹中

因此，步骤1）您需要更新

组件，并考虑跨平台支持：

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_资产从javascript访问它们

就这样！在某种程度上，它应该适用于大多数用例，但安卓和使用ProGuard缩小您的构建还有另一个奇怪的地方。基本上，如果你想使用它，你需要确保

你的.html

不被混合

因此，对于（可选）步骤3）打开位于

android/app/proguard rules.pro的proguard设置文件，并将以下内容添加到其中：

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

就这样，应该为使用WebViews跨平台设置一切。我真的不能相信这篇文章，因为我只是拼凑了一堆来自世界各地的解决方案。特别是，Arshiamidos和scottschmitz的解决方案最具启发性。我建议我们都去给他们买杯啤酒：）。
好的，所以这是一个复杂的问题。基本上，require（）可以在调试模式下与iOS和Android配合使用，但一旦你为发布版构建了一个Android apk，一切都会走下坡路。因此，我将为子孙后代，以及毫无疑问的未来我，将此分为几个阶段

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

因此，步骤1）您需要更新
组件，并考虑跨平台支持：

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_资产从javascript访问它们

就这样！在某种程度上，它应该适用于大多数用例，但安卓和使用ProGuard缩小您的构建还有另一个奇怪的地方。基本上，如果你想使用它，你需要确保
你的.html
不被混合

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

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

就这样，应该为使用WebViews跨平台设置一切。我真的不能相信这篇文章，因为我只是拼凑了一堆来自世界各地的解决方案。特别是，Arshiamidos和scottschmitz的解决方案最具启发性。我建议我们都去给他们买杯啤酒：）。
this.heartRateWebView=webView}
/>

在android中将Html放入android-->Asssets文件夹

iOS将您的Html放入文件夹中的React Native项目中

this.heartRateWebView=webView}
/>

在android中将Html放入android-->Asssets文件夹

iOS将您的Html放入文件夹中的React Native项目中

我正在使用webview在我的react原生应用程序中显示一个图表。它在开发过程中加载图表，但在发布版apk中不显示

我的webview代码如下所示

<View
        style={{ flex: 1, backgroundColor: 'yellow', alignSelf: 'stretch' }}>
        <WebView
          ref={(r) => (this.webRef = r)}
          originWhitelist={['*']}
          source={{ html: this.html() }}
          style={{ width: 380, height: 300, backgroundColor: 'lightblue' }}
          domStorageEnabled={true}
          javaScriptEnabled={true}
          injectedJavaScriptBeforeContentLoaded={this.pipeConsoleLog()}
          onMessage={this.handleMessage.bind(this)}
        />
      </View>

我正在使用webview在我的react原生应用程序中显示一个图表。它在开发过程中加载图表，但在发布版apk中不显示

我的webview代码如下所示

<View
        style={{ flex: 1, backgroundColor: 'yellow', alignSelf: 'stretch' }}>
        <WebView
          ref={(r) => (this.webRef = r)}
          originWhitelist={['*']}
          source={{ html: this.html() }}
          style={{ width: 380, height: 300, backgroundColor: 'lightblue' }}
          domStorageEnabled={true}
          javaScriptEnabled={true}
          injectedJavaScriptBeforeContentLoaded={this.pipeConsoleLog()}
          onMessage={this.handleMessage.bind(this)}
        />
      </View>

在我的react原生android应用程序中呈现chart.js时，我也遇到了同样的问题。该图表在应用程序处于调试模式时呈现。一旦生成release APK，图形就不会渲染。按照你的上述步骤，仍然没有帮助。有什么想法吗@Boomer Rogers你能给我们提供更多关于你尝试了什么以及你的代码是什么样子的信息吗？当我尝试在我的react原生android应用程序中呈现chart.js时，我也遇到了同样的问题。该图表在应用程序处于调试模式时呈现。一旦生成release APK，图形就不会渲染。按照你的上述步骤，仍然没有帮助。有什么想法吗@Boomer Rogers你能给我们一些关于你尝试了什么以及你的代码是什么样子的信息吗？
-keepclassmembers class fqcn.of.javascript.interface.for.webview {
  public *;
}