在构建发布的apk时，react native-webview不能呈现本地html。[英] react native - webview does not render local html when building release apk

问题描述

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.

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

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>

推荐答案

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.

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

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
/>

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.

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.

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)
}

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.

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.

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 *;
}

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 :).

其他推荐答案

 <WebView
  style={{
          flex: 1,
          marginLeft: Platform.OS === 'ios' ? 25 : 0,
          marginRight: Platform.OS === 'ios' ? 25 : 0,
          width: deviceWidth - 0,
          borderRadius: 4
          }}
          originWhitelist={['*']}
        source={Platform.OS === 'ios' ?
                require('../../../components/Heartrate.html') :
                {uri: 'file:///android_asset/Heartrate.html'}
                 }
         bounces={false}
         javaScriptEnabled={true}
         directionalLockEnabled={true}
         vertical={false}
         ref={(webView) => this.heartRateWebView = webView}
    />

In android Put Your Html in Android --> Asssets Folder

and iOS Put your Html in React Native Project inside your Folder