React Native中如何让WKWebView支持nativeapp://非HTTP/HTTPS协议？

Hey there! Let's fix that WKWebView issue with your custom nativeapp:// protocol. I've dealt with similar scenarios before, so here's how you can get it working with your specific React Native and WKWebView versions:

1. Add the onNavigationStateChange prop to intercept URL requests #

The core problem is WKWebView tries to load the unrecognized nativeapp:// scheme, which triggers an error. We can catch this navigation attempt early using the onNavigationStateChange prop. Update your WKWebView component like this:

<WKWebView
  ref={(webview) => { this.webview = webview; }} // Needed to control webview loading
  onLoad={this.handleWebviewLoad}
  source={{ uri: payment.redirect_url }}
  style={styles.webview}
  onNavigationStateChange={this.handleNavigationStateChange} // Add this to intercept URLs
/>

2. Implement the navigation handler function #

Create the handleNavigationStateChange method to check for your custom protocol, stop the invalid load, and handle the payment success logic:

handleNavigationStateChange = (navState) => {
  const { url } = navState;
  
  // Check if the URL uses our custom nativeapp:// scheme
  if (url.startsWith('nativeapp://')) {
    // Stop the webview from trying to load this unsupported URL
    this.webview.stopLoading();
    
    // Parse the URL to handle specific paths (like payment success)
    if (url.includes('/buypayment/success')) {
      // Trigger your app's payment success flow here
      console.log('Payment completed successfully!');
      // Example: Navigate to a success screen
      // this.props.navigation.navigate('PaymentSuccess');
    } else if (url.includes('/buypayment/cancel')) {
      // Optional: Handle payment cancellation if needed
      console.log('Payment was cancelled');
    }
    
    return;
  }
  
  // Let regular http/https URLs load normally
};

3. Verify the setup #

After adding these changes, when the payment redirects to nativeapp://domain/buypayment/success, the webview will no longer throw an error. Instead, your custom logic will run to handle the success state directly within your app.

Why this works #

WKWebView only natively supports standard schemes like http:// and https://. By intercepting the navigation state change, we catch the custom protocol URL before the webview attempts to load it, block the invalid request, and route the action to our app's internal logic instead.

内容的提问来源于stack exchange，提问作者Michael Ploeckinger