React Native Expo集成CC Avenue：WebView添加前后导航按钮等交互

要给你的支付网关WebView添加返回、前进按钮，核心是利用WebView的ref调用内置导航方法，同时通过导航状态跟踪按钮的可用状态，具体步骤如下：

1. 定义状态变量跟踪导航能力 #

在组件里添加两个状态，用来记录当前WebView是否可以返回或前进：

const [canGoBack, setCanGoBack] = useState(false);
const [canGoForward, setCanGoForward] = useState(false);

2. 更新导航状态回调 #

修改你的handleNavigationChange函数，利用回调返回的navigationState更新上面的状态：

const handleNavigationChange = (navigationState) => {
  setCanGoBack(navigationState.canGoBack);
  setCanGoForward(navigationState.canGoForward);
  // 保留你原来的其他逻辑
};

3. 添加导航按钮并绑定事件 #

在WebView的上方或下方添加返回、前进按钮，点击时通过ref调用WebView的内置方法，同时根据状态禁用不可用的按钮：

<div style={{ display: 'flex', gap: 10, padding: 10 }}>
  <button 
    onClick={() => webViewRef.current?.goBack()} 
    disabled={!canGoBack}
    style={{ opacity: canGoBack ? 1 : 0.5 }}
  >
    返回
  </button>
  <button 
    onClick={() => webViewRef.current?.goForward()} 
    disabled={!canGoForward}
    style={{ opacity: canGoForward ? 1 : 0.5 }}
  >
    前进
  </button>
</div>

4. 完整代码示例 #

整合后的完整组件代码如下：

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

const PaymentWebView = ({ route }) => {
  const { params } = route;
  const webViewRef = useRef(null);
  const [canGoBack, setCanGoBack] = useState(false);
  const [canGoForward, setCanGoForward] = useState(false);

  const handleNavigationChange = (navigationState) => {
    setCanGoBack(navigationState.canGoBack);
    setCanGoForward(navigationState.canGoForward);
    // 你的原有逻辑
  };

  const handleLoadProgress = (progress) => {
    // 你的原有逻辑
  };

  const handleMessage = (event) => {
    // 你的原有逻辑
  };

  const injectedJavaScript = `
    // 你的原有注入脚本
  `;

  return (
    <>
      {/* 导航按钮栏 */}
      <div style={{ display: 'flex', gap: 10, padding: 10, backgroundColor: '#f5f5f5' }}>
        <button 
          onClick={() => webViewRef.current?.goBack()} 
          disabled={!canGoBack}
          style={{ 
            padding: '8px 16px', 
            border: 'none', 
            borderRadius: 4, 
            opacity: canGoBack ? 1 : 0.5,
            backgroundColor: canGoBack ? '#007AFF' : '#ccc',
            color: '#fff'
          }}
        >
          返回
        </button>
        <button 
          onClick={() => webViewRef.current?.goForward()} 
          disabled={!canGoForward}
          style={{ 
            padding: '8px 16px', 
            border: 'none', 
            borderRadius: 4, 
            opacity: canGoForward ? 1 : 0.5,
            backgroundColor: canGoForward ? '#007AFF' : '#ccc',
            color: '#fff'
          }}
        >
          前进
        </button>
      </div>
      {/* 原WebView组件 */}
      <WebView
        ref={webViewRef}
        source={{ uri: params.url }}
        originWhitelist={["*"]}
        onNavigationStateChange={handleNavigationChange}
        onLoadProgress={handleLoadProgress}
        injectedJavaScript={injectedJavaScript}
        javaScriptEnabled={true}
        mixedContentMode="always"
        onMessage={handleMessage}
      />
    </>
  );
};

export default PaymentWebView;

注意事项 #

• 确保WebView的ref已经用useRef(null)正确初始化，否则无法调用goBack/goForward方法
• 部分支付网关页面可能会限制页面导航（比如禁止后退），这种情况下按钮会保持禁用状态，属于正常现象
• 按钮样式可根据你的UI需求自定义，示例仅为基础样式

内容的提问来源于stack exchange，提问作者yasir arafath