在 React Navigation 中处理 Drawer Navigator 中的返回导航

Posted 2023-04-18

【中文标题】在 React Navigation 中处理 Drawer Navigator 中的返回导航

【英文标题】：Handling Back Navigation in Drawer Navigator in React Navigation

【发布时间】：2019-08-01 12:43:22

【问题描述】：

我已经使用 React Navigation V3 在我的应用程序中成功创建了一个导航抽屉。但是当我使用抽屉打开两个页面后，单次后按，页面直接重定向到主页而不是上一页时，就会出现问题。

我希望应用程序流程与 stacknavigator 类似，但 back() 函数在抽屉导航器中也不可用。这是我的抽屉导航器：

const DrawerNavigator = createDrawerNavigator(
    Home: 
        screen:HomeScreen
    ,
    Events: 
      screen: EventsScreen
    ,
    Waste: 
      screen: ReportWasteScreen
    
  ,
  DrawerConfig
);

如何修改代码，以便在打开事件屏幕后打开废屏时，单次后按，页面应该重定向到事件屏幕而不是主屏幕？

【问题讨论】：

facebook.github.io/react-native/docs/backhandler

【参考方案1】：

使用“BackHandler”事件自定义路由

【讨论】：

我在抽屉导航器中找到了使用堆栈导航器的解决方案。请看我发布的答案！谢谢！ :)

【参考方案2】：

我使用这个link 中的答案找到了解决方案。

import createDrawerNavigator, createStackNavigator, createAppContainer from 'react-navigation'
class App extends Component 
    render() 
        return (
            <View style= flex: 1, backgroundColor: 'transparent' >
                <AppDrawerNavigator />
            </View>
        )
    


const AppStackNavigator = createStackNavigator(
    Home: HomeScreen,
    Events: EventsScreen,
    Waste: WasteScreen
);

const AppDrawerNavigator = createDrawerNavigator(
    Home: AppStackNavigator
);

export default createAppContainer(AppDrawerNavigator);

此解决方案在抽屉导航器中创建一个堆栈导航器，这使得在抽屉导航器中单击的链接每次都会打开一个新页面。后处理在这里自动完成。

另外，为了去掉stack navigator的默认header，我添加了如下代码：

  headerMode:'none',
  navigationOptions: 
    headerVisible: false,
  

到AppStackNavigator