Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

White blank screen when load local html file in a webview

See original GitHub issue

Environment

OS: Linux 4.15 Node: 9.11.1 Yarn: 1.6.0 npm: 5.6.0 Watchman: Not Found Xcode: N/A Android Studio: Not Found

Packages: (wanted => installed) react: 16.3.1 => 16.3.1 react-native: ^0.55.4 => 0.55.4

Description

Hi, I have faced a really troublesome problem. I integrate react-native to my existed android app. My react native activity has only one webview. The webview loads a local html file. Almost every 20 times there will occur one time that the webview loads a white blank screen.

Here is my code:

index.android.js file:

'use strict';

import React from 'react';
import {
  AppRegistry,
  StyleSheet,
  WebView,
  Text,
  Alert,
  DeviceEventEmitter,
  View
} from 'react-native';
import {
  NativeModules
} from 'react-native';

var webView;
class HelloWorld extends React.Component {

  _onLoadEnd() {
    console.log("_onLoadEnd")
    if (this.props.station != null && this.webView != null) {
      this.webView.postMessage(this.props.station);
    } else {
        NativeModules.RouteSearchCallback.callback("fail", "");
    }
  }

  shouldComponentUpdate() {
    console.log("shouldComponentUpdate")
    return true;
  }

  handleMessage = (evt: any) => {
    NativeModules.RouteSearchCallback.callback(evt.nativeEvent.data, this.props.station);
  }

  render() {
    console.log("render")
    return ( <
      View style = {
        styles.container
      } >

      <WebView style = {styles.webview}
      javaScriptEnabled = {
        true
      }
      ignoreSslError={true}
      javaScriptEnabledAndroid = {
        true
      }
      domStorageEnabled = {
        false
      }
      mixedContentMode = {
        'compatibility'
      }
      ref = {
        (webView) => this.webView = webView
      }
      source = {
        {
          uri: 'file:///android_asset/map.html'
        }
      }
      startInLoadingState = {
        false
      }
      scalesPageToFit = {
        true
      }
      automaticallyAdjustContentInsets = {
        false
      }
      onLoadEnd = {
        () => setTimeout(this._onLoadEnd.bind(this), 500)
      }
      onMessage = {
        this.handleMessage
      }
      />


      </View>
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: '#fff'
  },
  webview: {
    flex: 1,
    backgroundColor: '#fff'
  },
  searchframe: {
    height: 50,
    backgroundColor: '#fff'
  }
});
AppRegistry.registerComponent('TestWebView', () => HelloWorld);`

- My html file:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,shrink-to-fit=no" name="viewport"/> <title> SUBWAY </title> </meta> </head> <body> <div id="mysubway"></div> <script src="http://webapi.amap.com/subway?v=1.0&key=********&callback=cbk"></script> <script type="text/javascript"> window.cbk = function() { var mySubway = subway("mysubway", { adcode: "4101", theme: "normal", client: 0, doubleclick: { switch: true } }); mySubway.event.on("subway.complete", function () { }); mySubway.event.on(" subway.routeComplete", function (ev, info) { window.postMessage(JSON.stringify(info)); }); document.addEventListener("message", function(event) { console.log(event.data); var searchInfo = JSON.parse(event.data); var start = searchInfo.startStation; var end = searchInfo.endStation; mySubway.setStart(start); mySubway.setEnd(end); mySubway.route(start, end, { closeBtn: true }); }, false); mySubway.event.on("station.touch", function(ev, info) { var id = info.id; mySubway.stopAnimation(); mySubway.addInfoWindow(id, {}); var center = mySubway.getStCenter(id); mySubway.setCenter(center); }); mySubway.event.on("lineName.touch", function(ev, info) { mySubway.showLine(info.id); var select_obj = qs('#g-select'); mySubway.setFitView(select_obj); var center = mySubway.getSelectedLineCenter(); mySubway.setCenter(center); }); mySubway.event.on("subway.touch", function() { mySubway.clearInfoWindow(); }); mySubway.event.on("startStation.touch", function(ev, info) { mySubway.stopAnimation(); mySubway.clearInfoWindow(); mySubway.setStart(info.id, {}); startInfo = info; route(); }); mySubway.event.on("endStation.touch", function(ev, info) { mySubway.stopAnimation(); mySubway.clearInfoWindow(); mySubway.setEnd(info.id, {}); endInfo = info; route(); }); var startInfo = "", endInfo = ""; function route() { if (startInfo.id && endInfo.id) { mySubway.route(startInfo.id, endInfo.id, {}); startInfo = {}; endInfo = {}; } } }; </script> </body> </html> ```

My react native activity:

public class NewRouteSearchActivity extends ReactActivity {
    private static final String TAG = NewRouteSearchActivity.class.getCanonicalName();
    @javax.annotation.Nullable
    @Override
    protected String getMainComponentName() {
        return "TestWebView";
    }

    @Override
    protected ReactActivityDelegate createReactActivityDelegate() {
        return new MyReactDelegate(this, getMainComponentName());
    }

    class  MyReactDelegate extends ReactActivityDelegate {
        private Bundle mInitialProps = null;
        private final @Nullable Activity mActivity;

        public MyReactDelegate(Activity activity, @javax.annotation.Nullable String mainComponentName) {
            super(activity, mainComponentName);
            mActivity = activity;
        }

        @Override
        protected void onCreate(Bundle savedInstanceState) {
            Bundle bundle = mActivity.getIntent().getExtras();
            if (bundle != null && bundle.containsKey(IntentConstants.INTENT_TO_ROUTE_SEARCH_EXTRA_STATION) ) {
                String station = bundle.getString(IntentConstants.INTENT_TO_ROUTE_SEARCH_EXTRA_STATION);
                Log.d(TAG, "onCreate: extra station =" + station);
                mInitialProps = new Bundle();
                // put any initialProps here
                mInitialProps.putString(IntentConstants.INTENT_TO_ROUTE_SEARCH_EXTRA_STATION, station);
            }
            super.onCreate(savedInstanceState);
        }

        @javax.annotation.Nullable
        @Override
        protected Bundle getLaunchOptions() {
            return mInitialProps;
        }
    }
}

the way to start react native activity:

                        SearchParams params = new SearchParams();
                        params.startStation = result.getExtraParams().get(0);
                        params.endStation = result.getExtraParams().get(1);
                        params.isFromVoice = true;
                        Gson gson = new Gson();
                        String param = gson.toJson(params);
                        intent.putExtra(IntentConstants.INTENT_TO_ROUTE_SEARCH_EXTRA_STATION, param);
                        intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
                        context.startActivity(intent);```


## Here is some error message:
```D/cn.zzmetro.routesearch.NewRouteSearchActivity(26992): onCreate: extra station ={"endStation":"龙子湖","isFromVoice":true,"startStation":"紫荆山"}
10-15 15:01:53.415 D/ReactNative(26992): ReactInstanceManager.attachRootViewToInstance()
10-15 15:01:53.417 I/ReactNativeJS(26992): Running application "TestWebView" with appParams: {"initialProps":{"station":"{\"endStation\":\"龙子湖\",\"isFromVoice\":true,\"startStation\":\"紫荆山\"}"},"rootTag":191}. __DEV__ === false, development-level warning are OFF, performance optimizations are ON
10-15 15:01:53.418 I/ReactNativeJS(26992): componentWillMount
10-15 15:01:53.419 I/ReactNativeJS(26992): render
10-15 15:01:53.426 I/ReactNativeJS(26992): componentDidMount
10-15 15:01:53.430 D/CrashReport(26992): >>> cn.zzmetro.routesearch.NewRouteSearchActivity onResumed <<<
10-15 15:01:53.431 I/CrashReport-Native(26992): Set native info: isAppForeground(true)
10-15 15:01:53.856 W/unknown:ReconnectingWebSocket(26992): Couldn't connect to "ws://localhost:8081/message?device=h1301_1-box%20-%207.1.2%20-%20API%2025&app=cn.zzmetro&clientid=DevSupportManagerImpl", will silently retry
10-15 15:01:53.917 D/cn.zzmetro.voice.taskmanager.TaskManager(26992): start get task
10-15 15:01:53.920 D/mali_winsys(26992): EGLint new_window_surface(egl_winsys_display*, void*, EGLSurface, EGLConfig, egl_winsys_surface**, egl_color_buffer_format*, EGLBoolean) returns 0x3000
10-15 15:01:54.009 D/AIUILog (26992): readAudio leave, dataSize=16000, bufLen=179200
10-15 15:01:54.017 D/cn.zzmetro.voice.taskmanager.TaskManager(26992): start get task
10-15 15:01:54.033 E/XtHardwareServerManager(26992): 硬件信息：result:true, message:{"charge_state":false,"current_floor":22,"current_pose":{"theta":1.64824,"x":10.9069,"y":6.98121},"error_code":"00000000","estop_state":true,"hard_estop_state":true,"move_retry_times":0,"move_status":"idle","move_target":"","power_percent":38,"soft_estop_state":false}
10-15 15:01:54.036 I/ActivityManager(  427): Displayed cn.zzmetro/.routesearch.NewRouteSearchActivity: +663ms
10-15 15:01:54.229 W/cr_BindingManager(26992): Cannot call determinedVisibility() - never saw a connection for the pid: 26992
10-15 15:01:54.527 D/CrashReport(26992): >>> cn.zzmetro.routesearch.NewRouteSearchActivity onDestroyed <<<
10-15 15:01:54.528 D/ReactNative(26992): ReactInstanceManager.detachViewFromInstance()
10-15 15:01:54.530 I/ReactNativeJS(26992): componentWillUnmount
10-15 15:01:54.590 W/art     (  958): Suspending all threads took: 15.228ms
10-15 15:01:54.595 I/art     (  958): Background partial concurrent mark sweep GC freed 3466(278KB) AllocSpace objects, 27(2MB) LOS objects, 39% free, 3MB/5MB, paused 16.784ms total 32.230ms

Wish for your reply. Thank you.