React Navigation 3：Android 中的后退按钮不会返回上一屏幕答案

【问题标题】：React Navigation 3: Back button in Android doesn't back to previous screenReact Navigation 3：Android 中的后退按钮不会返回上一屏幕
【发布时间】：2019-08-27 21:10:26
【问题描述】：

我正在使用 React Navigation 3 升级我的 React Native 应用程序的路由器配置，现在很多事情都得到了改进，但我不明白为什么当我在 Android 中按下后退按钮时，没有将我发送到上一个视图并且而是把我送到家。

我的路线

const drawerConfig = {
  initialRouteName: 'Home',
  contentComponent: SideMenu,
  drawerWidth: width,
}

const MainDrawerNavigator = createDrawerNavigator(
  {
    Home: {
      screen: Home,
    },
    Company: {
      screen: Company,
    },
    Gifts: {
      screen: Gifts,
    },
    Jobs: {
      screen: Jobs,
    },
    Job: {
      screen: Job,
    },
    Contact: {
      screen: Contact
    }
  },
  drawerConfig,
);

const InitialStack = createStackNavigator(
  {
    Menu: {
      screen: Menu,
      path: 'menu/',
    }
  },
  {
    initialRouteName: 'Menu',
    headerMode: 'none',
  }
);

const SwitchNavigator = createSwitchNavigator(
  {
    Init: InitialStack,
    App: MainDrawerNavigator,
  },
  {
    initialRouteName: 'Init',
  }
);

const AppContainer = createAppContainer(SwitchNavigator);

export default AppContainer;

如果我这样做：打开抽屉，打开作业，然后按下作业按钮以加载作业视图，流程运行良好，但如果我在作业视图中按下后退按钮，则显示的不是作业而是主页。

我正在使用this.props.navigation.navigate('...') 导航，因为推送不起作用。

你知道为什么吗？

我正在使用 react-navigation 3.5.1 和 react-native 0.59.3

【问题讨论】：

大部分时间你要手动处理android back button ...因为仅仅依赖默认行为是不够的
我以为默认行为是总是弹出到上一个屏幕，但似乎我错了。

标签： android reactjs react-native react-navigation

【解决方案1】：

您可以从“react-native”导入 BackHandler，并可以在您想要返回的屏幕类中使用如下代码：

componentWillMount() {
    BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);
}

componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton);
}

handleBackButton = () => {
    this.props.navigation.goBack();
    return true;
};

【讨论】：

【解决方案2】：

我刚刚想通了。

我没有为我的路线编写正确的配置，因为如果我想从 Job 回到 Jobs 而不是回到 Home，我需要的每个“堆栈”视图都需要一个堆栈，所以现在它们可以完全按照我想要的方式工作, 弹出在不使用后处理程序事件的情况下工作得很好。

像这样：

// Jobs stack
const JobsStack = createStackNavigator(
    {
        JobList: {
            screen: Jobs,
        },
        Job: {
            screen: Job,
        },
    },
    {
        headerMode: 'none',
    }
);

// Main drawer
const MainDrawerNavigator = createDrawerNavigator(
    {

        ...
        Jobs: JobsStack,
        Contact: {
            screen: Contact
        }
        ...
    },
    drawerConfig,
);

感谢所有帮助过我的人:)

【讨论】：

谢谢！这很有帮助。你拯救了我的一天。