对硬件背面的本机 webview 导航问题做出反应答案

【问题标题】：react native webview navigation issue on hardware back对硬件背面的本机 webview 导航问题做出反应
【发布时间】：2021-05-25 17:40:47
【问题描述】：

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

试过以下，

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;
};

如何实现？

【问题讨论】：

你的方法有什么问题？

标签： react-native react-native-android react-native-webview

【解决方案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 的 useEffect。

【讨论】：