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

【问题标题】：Handling Back Navigation in Drawer Navigator in React Navigation在 React Navigation 中处理 Drawer Navigator 中的返回导航
【发布时间】：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

标签： android react-native

【解决方案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

【讨论】：