React Native iOS 剖析 WebView && 解决 Error loading page Domain: WebKitErrorDomain Error Code: 101 The U

renderError={ (e) => {
    if (e === 'WebKitErrorDomain') {
      return
    }
  }}

 - (BOOL)webView:(__unused UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request 

- (void)webView:(__unused UIWebView *)webView didFailLoadWithError:(NSError *)error

- (void)webView:(__unused  UIWebView *)webView didFailLoadWithError:(NSError *)error

{

  if (_onLoadingError) {

  if ([error.domain  isEqualToString:NSURLErrorDomain] && error.code == NSURLErrorCancelled) {

  // NSURLErrorCancelled is reported when a page has a redirect OR if you load

  // a new URL in the WebView before the previous one came back. We can just

  // ignore these since they aren't real errors.

  // [http://stackoverflow.com/questions/1024748/how-do-i-fix-nsurlerrordomain-error-999-in-iphone-3-0-os](http://stackoverflow.com/questions/1024748/how-do-i-fix-nsurlerrordomain-error-999-in-iphone-3-0-os)

  return;

 }

  if ([error.domain  isEqualToString:@"WebKitErrorDomain"] && error.code == 102) {

  // Error code 102 "Frame load interrupted" is raised by the UIWebView if

  // its delegate returns FALSE from webView:shouldStartLoadWithRequest:navigationType

  // when the URL is from an http redirect. This is a common pattern when

  // implementing OAuth with a WebView.

  return;

 }

  NSMutableDictionary<NSString *, id> *event = [self  baseEvent];

 [event addEntriesFromDictionary:@{

  @"domain": error.domain,

  @"code": @(error.code),

  @"description": error.localizedDescription,

  }];

  _onLoadingError(event);

 }

}

...
otherView = (this.props.renderError || defaultRenderError)(
        errorEvent.domain,
        errorEvent.code,
        errorEvent.description
      );
...
      
...      
return (
      <View style={styles.container}>
        {webView}
        {otherView}
      </View>
    );
...

 - (BOOL)webView:(__unused UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request 

BOOL isJSNavigation = [request.URL.scheme isEqualToString:RCTJSNavigationScheme];

 if (![request.URL.scheme isEqual:@"http"] && 
      ![request.URL.scheme isEqual:@"https"] && 
      ![request.URL.scheme isEqual:@"about:blank"]) {
         if ([[UIApplication sharedApplication]canOpenURL:request.URL]) {
             [[UIApplication sharedApplication]openURL:request.URL];
         }
      return NO;
  }

return YES;

return !isJSNavigation  && (如上校验)

 - (BOOL)webView:(__unused UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request 

return !isJSNavigation;

// Block the main thread for a maximum of 250ms until the JS thread returns
  if ([_shouldStartLoadLock lockWhenCondition:0 beforeDate:[NSDate dateWithTimeIntervalSinceNow:.25]]) {
    BOOL returnValue = _shouldStartLoad;
    [_shouldStartLoadLock unlock];
    _shouldStartLoadLock = nil;
    return returnValue;
  } else {
    RCTLogWarn(@"Did not receive response to shouldStartLoad in time, defaulting to YES");
    return YES;
  }

/**
     * Function that returns a view to show if there's an error.
     */
    renderError: PropTypes.func, // view to show if there's an error

var defaultRenderError = (errorDomain, errorCode, errorDesc) => (
  <View style={styles.errorContainer}>
    <Text style={styles.errorTextTitle}>
      Error loading page
    </Text>
    <Text style={styles.errorText}>
      {'Domain: ' + errorDomain}
    </Text>
    <Text style={styles.errorText}>
      {'Error Code: ' + errorCode}
    </Text>
    <Text style={styles.errorText}>
      {'Description: ' + errorDesc}
    </Text>
  </View>
);

- (void)webView:(__unused UIWebView *)webView didFailLoadWithError:(NSError *)error

var webViewStyles = [styles.container, styles.webView, this.props.style];
if (this.state.viewState === WebViewState.LOADING ||
      this.state.viewState === WebViewState.ERROR) {
      // if we're in either LOADING or ERROR states, don't show the webView
      webViewStyles.push(styles.hidden);
    }

    var webViewStyles = [styles.container, styles.webView, this.props.style];
    if (this.state.viewState === WebViewState.LOADING ||
      this.state.viewState === WebViewState.ERROR) {
      // if we're in either LOADING or ERROR states, don't show the webView
      webViewStyles.push(styles.hidden);
    }

var webViewStyles = [styles.container, styles.webView, this.props.style];
    if (this.state.viewState === WebViewState.LOADING) {
      // if we're in either LOADING states, don't show the webView
      webViewStyles.push(styles.hidden);
    }

var webView =
      <NativeWebView
        ref={RCT_WEBVIEW_REF}
        key="webViewKey"
        style={webViewStyles}
        source={resolveAssetSource(source)}
        injectedJavaScript={this.props.injectedJavaScript}
        bounces={this.props.bounces}
        scrollEnabled={this.props.scrollEnabled}
        decelerationRate={decelerationRate}
        contentInset={this.props.contentInset}
        automaticallyAdjustContentInsets={this.props.automaticallyAdjustContentInsets}
        onLoadingStart={this._onLoadingStart}
        onLoadingFinish={this._onLoadingFinish}
        onLoadingError={this._onLoadingError}
        messagingEnabled={messagingEnabled}
        onMessage={this._onMessage}
        onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
        scalesPageToFit={this.props.scalesPageToFit}
        allowsInlineMediaPlayback={this.props.allowsInlineMediaPlayback}
        mediaPlaybackRequiresUserAction={this.props.mediaPlaybackRequiresUserAction}
        dataDetectorTypes={this.props.dataDetectorTypes}
        {...nativeConfig.props}
      />;

 webView: {
    backgroundColor: '#ffffff',
  },
  container: {
    flex: 1,
  },

style: {
    backgroundColor: '#ffffff',
    flex: 1,
}

<WebView nativeConfig={
                        {
                            props: {
                                backgroundColor: '#ffffff',
                                flex: 1,
                            }
                        }
                    }
        }