react-native - React Native Expo BackHandler 功能

Question

只能添加backhandler到一个屏幕吗？

我使用底部标签和堆栈导航

tab : {
 screen : stack A,
 screen : stack B,
}

stack A : {
 screen : screen A1,
 screen : screen A2,
 screen : screen A3
}
stack B : {
 screen : screen B1,
 screen : screen B2
}

我可以从屏幕 B1 导航到屏幕 A2 和屏幕 A1 到 A2。

如果我从屏幕 B1 导航到 A2 并在 A2 中按回，则屏幕 B1 应该聚焦，并且与屏幕 A1 到 A2 相同。

我尝试在屏幕 A2 中添加回处理程序，并从 B1 和 A1 传递标志以导航到相应的屏幕。

问题是当我在屏幕 A3 并按回时，无法重定向到屏幕 A2。

I need to handle back button only on screen A2.

标签： react-nativeexporeact-navigation

Answer 1

您可以BackHandler使用react-navigationlike

BackHandler.js在组件中创建

import { BackHandler } from "react-native";
import React from "react";

function ProfileScreen({ onBackPress }) {
  React.useEffect(() => {
    React.useCallback(() => {
      BackHandler.addEventListener("hardwareBackPress", onBackPress);

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

用法如

import BackHandler from "./components";

renderBackHandler = () => {
      return (
        <BackHandler
          onBackPress={() => {
            this.handleBackPress();
            return false;
          }}
        />
      );
    } 

render(){
  // ...

  {this.renderBackHandler()}

  // ...
}