add renderLoading callback to CrosswalkWebview

[iapolog2u]

This modification is based on this repo and offical webview

renderLoading:

renderError:

[jordaaash]

I would prefer this library to remain agnostic of any styling of the WebView, error display, or any other determinations of visual appearance. In my opinion, we should render an unstyled WebView only, and communicate errors to the parent component so it can choose what to show and how it will look. What do you think about that strategy, and is there a way you could see updating this pull request to do that?

[iapolog2u]

Thanks for your reply, I agree with you. But I don't know how to optimize it : ) In my usage scenario I want my webview on Android behave like iOS.

Below is the code of parent component, it use startInLoadingState, renderLoading and renderError to do the stuff (to choose what to show and how it will look)

import {
  WebView,
  BackAndroid,
  Dimensions,
  Text,
  Image,
  TouchableOpacity,
  TouchableWithoutFeedback,
  View,
  Modal,
  Platform,
} from 'react-native';

import WebViewAndroid from 'react-native-webview-crosswalk';

...

import LoadingView from '../Components/LoadingView';
import LoadingErrorView from '../Components/LoadingErrorView';

...

  renderLoading() {
    const loadingText = 'v' + JsConfig['VERSION_NAME'][Platform.OS] + ' 加载中';
    return <LoadingView desc={loadingText} />;
  }

  renderError(domain, code, message) {
    return <LoadingErrorView
            errorDomain={domain}
            errorCode={code}
            errorDesc={message}
            />;
  }

  renderWebviewAndroid() {
    return (
      <WebViewAndroid
        ref={(ref) => { this.webview = ref; }}
        automaticallyAdjustContentInsets={false}
        style={styles.base}
        source={{ uri: this.props.lastUrl }}
        javaScriptEnabled
        domStorageEnabled
        startInLoadingState
        scalesPageToFit
        decelerationRate="normal"
        onShouldStartLoadWithRequest={() => {
          const shouldStartLoad = true;
          return shouldStartLoad;
        }}
        onNavigationStateChange={this.onNavigationStateChange}
        onLoad={this.onload}
        renderLoading={this.renderLoading}
        renderError={this.renderError}
      />
    );
  }

  renderWebviewIOS() {
    return (
      <WebView
        ref={(ref) => { this.webview = ref; }}
        automaticallyAdjustContentInsets={false}
        style={styles.base}
        source={{ uri: this.props.lastUrl }}
        javaScriptEnabled
        domStorageEnabled
        startInLoadingState
        scalesPageToFit
        decelerationRate="normal"
        onShouldStartLoadWithRequest={() => {
          const shouldStartLoad = true;
          return shouldStartLoad;
        }}
        onNavigationStateChange={this.onNavigationStateChange}
        onLoad={this.onload}
        renderLoading={this.renderLoading}
        renderError={this.renderError}
      />
    );
  }

  renderWebView() {
    if (Platform.OS === 'ios') {
      return this.renderWebviewIOS();
    } else {
      return this.renderWebviewAndroid();
    }
  };