在硬件上反应本机 webview 导航问题

Question

我正在网络视图中打开 url。在打开 webview（假设页面 A）时，当我通过单击某些选项遍历或进入任何其他选项时，其他一些页面被打开（假设页面 B）。现在，当我单击硬件后退选项时，我想 return 回到之前的屏幕（页面 A）。再次单击返回，我想 return 进入我的应用程序。

尝试关注，

const [canGoBack, setCanGoBack] = useState(false);
const WebViewRef = useRef<WebView>(null);

useEffect(() => {
  if (Platform.OS === "android") {
    BackHandler.addEventListener("hardwareBackPress", HandleBackPressed);

    return () => {
      BackHandler.removeEventListener("hardwareBackPress", HandleBackPressed);
    };
  }
}, []);

<WebView
  ref={WebViewRef}
  // onLoadStart={() => setLoading!(true)}
  onLoadEnd={() => setLoading!(false)}
  source={{ uri: props.navigation.getParam("x") }}
  onNavigationStateChange={(data) => handleResponse(data, WebViewRef)}
/>;

const handleResponse = (data: NavState, WebViewRef: any) => {
  console.log(data.canGoBack); // <- always false, if i can go back further back or not in a webview
  setCanGoBack(data?.canGoBack!);
};

const HandleBackPressed = () => {
  if (WebViewRef.current && canGoBack) {
    WebViewRef.current.goBack();
    return true; // PREVENT DEFAULT BEHAVIOUR (EXITING THE APP)
  }
  return false;
};

如何实现？

Answer 1

在您的代码中，canGoBack 更新未反映在 backHandler 方法中，因为 useEffect 仅在初始化时获得运行。

您可以使该效果依赖于 canGoBack，如下所示：

  React.useEffect(() => {
    if (Platform.OS === 'android') {
      const backHandler = BackHandler.addEventListener(
        'hardwareBackPress',
        () => {
          if (webViewRef.current && canGoBack) {
            webViewRef.current.goBack();
            return true; // PREVENT DEFAULT BEHAVIOUR (EXITING THE APP)
          }
          return false;
        }
      );

      return () => backHandler.remove();
    }
  }, [canGoBack]);

您可以在此处查看工作小吃示例：https://snack.expo.io/QcYE9CTaO

如果您可以将 backHandler 方法包装在 useCallback 中，这样会更简洁一些，这样它取决于状态值，然后是取决于新 backHandler.[=15 的 useEffect =]

在硬件上反应本机 webview 导航问题

react native webview navigation issue on hardware back

react-native

react-native-android

react-native-webview