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

问题描述 投票:2回答:2

我正在使用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 reactjs react-native react-navigation
2个回答
0
投票

您可以从'react-native'导入BackHandler,并可以在您想要返回的屏幕类中使用如下代码:

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

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

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

0
投票

我才想通了。

我没有为我的路线编写正确的配置,因为如果我想从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,
);

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

© www.soinside.com 2019 - 2024. All rights reserved.