React Native Webview：如何為 Android 啟用“滑動導航”手勢？

Question

我正在使用react-native-webview為我已經開發的 web 應用程序創建 webview 界面。 我正在嘗試啟用“滑動導航”手勢以在 Web 應用程序的屏幕之間進行轉換，並且它提供了一個內置方法allowsBackForwardNavigationGestures來為 iOS 執行此操作。 但是，對於Android，它沒有這樣的方法。

為 webview 啟用“滑動導航”手勢的方法是什么？ 有圖書館可以做到這一點嗎？ 如果是這樣，那會是什么？ 如果沒有，這樣做的解決方法是什么？

下面是我寫的簡單代碼。

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

export default function App() {
  return (
    <WebView source = {{uri:/* url to my website */}} 
       style = {{ marginTop : 50 }} 
       allowsBackForwardNavigationGestures = {true}
    />
  );
}

謝謝！

Answer 1

const webView = useRef(null)
const [canGoBack, setCanGoBack] = useState(false)

useEffect(() => {
    if (Platform.OS === 'android') {
        console.log(webView)
        BackHandler.addEventListener('hardwareBackPress', HandleBackPressed)

        return () => {
            BackHandler.removeEventListener('hardwareBackPress', HandleBackPressed)
        }
    }
}, []) // INITIALIZE ONLY ONCE

const HandleBackPressed = () => {
    if (webView.current) {
        webView.current.goBack()
        return true
    }
    return false
}

return (
    <WebView
        ref={webView}
        style={{
            width: '100%',
            height: '100%',
        }}
        source={{ uri:"example.com" }}
    />
)

並從 react-native 導入必要的項目