如何在React Native中实现类表单POST提交并跳转WebView？

Got it, this is a super common pain point when working with payment gateways in React Native—since we don’t have the browser’s document object to dynamically submit forms, we need to simulate that behavior using the WebView component. Here’s a clean, reliable way to do it:

First, make sure you’re using the react-native-webview library (the official WebView component is deprecated in newer React Native versions). If you haven’t installed it yet, run:

npm install react-native-webview
# or
yarn add react-native-webview

Core Approach #

We’ll create an HTML string that contains a hidden form with all your POST parameters, then inject this HTML into the WebView. The HTML will automatically submit the form as soon as it loads—matching exactly how a browser handles dynamic form submissions.

Full Code Example #

import React from 'react';
import { WebView } from 'react-native-webview';

const PostWebView = ({ targetUrl, postData }) => {
  // Convert your post data object into hidden input elements
  const formInputs = Object.entries(postData).map(([name, value]) => 
    `<input type="hidden" name="${name}" value="${encodeURIComponent(value)}" />`
  ).join('');

  // Build the auto-submitting HTML
  const html = `
    <!DOCTYPE html>
    <html>
      <body onload="document.getElementById('payment-form').submit()">
        <form id="payment-form" action="${targetUrl}" method="POST">
          ${formInputs}
        </form>
      </body>
    </html>
  `;

  return (
    <WebView
      source={{ html }}
      // Optional: Track navigation for success/cancel handling
      onNavigationStateChange={(navState) => {
        if (navState.url !== 'about:blank') {
          console.log('Navigated to gateway page:', navState.url);
          // Add logic here to handle redirects (e.g., success/cancel URLs)
        }
      }}
    />
  );
};

// Usage example in your app
const PaymentScreen = () => {
  return (
    <PostWebView
      targetUrl="http://example.com/some-url-end-point"
      postData={{ q: 'a', amount: '99.99', order_id: '12345' }}
    />
  );
};

export default PaymentScreen;

Key Details to Keep in Mind #

• encodeURIComponent: Always use this to escape your post data values—it prevents special characters from breaking the HTML or being misinterpreted by the payment gateway server.
• Auto-Submit Trigger: The <body>’s onload event ensures the form submits immediately after the HTML loads, so the user won’t see the hidden form at all.
• Navigation Tracking: Use onNavigationStateChange to monitor when the user moves to the gateway’s page, or when they’re redirected back to your app’s success/cancel URLs.
• Hidden Form: The form is invisible to the user, so the experience matches a standard browser-based form submission.

Troubleshooting Tips #

• If you see a brief blank screen: That’s normal—it’s just the WebView loading the auto-submit HTML before redirecting to the gateway.
• If parameters aren’t being received correctly: Double-check that you’re using encodeURIComponent for all values, and that the name attributes match exactly what the gateway expects.
• For iOS: Ensure you’ve enabled App Transport Security exceptions if your gateway uses HTTP (though you should always use HTTPS for payment-related traffic).

内容的提问来源于stack exchange，提问作者Adeel Imran