React native 回应硬件上的本机webview导航问题

我正在webview中打开一个url。在打开webview（比如说A页）时，当我通过单击一些选项遍历或进入任何其他选项时，会打开一些其他页面（比如B页）。现在，当我单击hardware back（硬件返回）选项时，我想返回到前面的屏幕（第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;
};

const[canGoBack，setCanGoBack]=useState（false）；
const WebViewRef=useRef（null）；
useffect（（）=>{
如果（Platform.OS==“android”）{
BackHandler.addEventListener（“硬件回压”，把手回压）；
return（）=>{
BackHandler.removeEventListener（“硬件回压”，把手回压）；
};
}
}, []);
正在加载！（对）}
onLoadEnd={（）=>setLoading！（false）}
source={{uri:props.navigation.getParam（“x”）}
onNavigationStateChange={（数据）=>HandlerResponse（数据，WebViewRef）}
/>;
const handleResponse=（数据：NavState，WebViewRef:any）=>{
console.log（data.canGoBack）；//{
if（WebViewRef.current&&canGoBack）{
WebViewRef.current.goBack（）；
返回true；//防止默认行为（退出应用程序）
}
返回false；
};

---

如何实现它？

在您的代码中，

canGoBack

更新不会反映在backHandler方法中，因为useffect只在init上运行

您可以按如下方式根据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]);

您可以在此处看到一个工作零食示例：

---

如果您可以将backHandler方法包装在一个

useCallback

中，使其取决于状态值，然后是一个useffect，它取决于新的

backHandler

您的方法有什么问题？