React 导航 - 如何将 drawerNavigator 嵌套在 stackNavigator 中

Question

我正在使用 react-navigation，我想从 MyProfile 屏幕打开抽屉，可以选择转到 EditProfile 屏幕和设置屏幕。但是当我点击 MyProfile 的 header 按钮时，我不知道如何打开抽屉。

App.js:

const MyProfileStack = createStackNavigator({
  MyProfile: {
    screen: profile,
    navigationOptions: ({navigation}) => {
      return {
        title: "My Profile",
        headerRight: (
          <Icon type="evilicon" name="navicon" size={40}
          onPress={() => navigation.dispatch(DrawerActions.openDrawer())}/>
        )
      };
    }
  }
})

const DrawerStack = createDrawerNavigator({
  Edit: { screen: EditProfileStack }
  Settings: { screen: SettingsStack }
})

const EditProfileStack = createStackNavigator({ 
  EditProfile: {
    screen: editProfile,
    navigationOptions: ({navigation}) => {
      return {
        title: "Edit Profile",
        headerLeft: (
          <Icon type="evilicon" name="chevron-left" size={50}
          onPress={() => navigation.navigate("MyProfile")}/>
        )
      };
    }
  }
});

const TabStack = createBottomTabNavigator({
  Feed: { screen: FeedStack },
  Profile: { screen: MyProfileStack },
});

const MainStack = createSwitchNavigator(
  {
    Home: TabStack,
    Drawer: DrawerStack
  },
  {
    initialRouteName: 'Home'
  }
);

const AppContainer = createAppContainer(MainStack);

Answer 1

解决方案

您需要将您的 MyProfileStack 放入 DrawerStack 中，如下所示。

const DrawerStack = createDrawerNavigator({
  MyProfile: { screen: MyProfileStack }
  Edit: { screen: EditProfileStack }
  Settings: { screen: SettingsStack }
})


const TabStack = createBottomTabNavigator({
  Feed: { screen: FeedStack },
  Profile: { screen: DrawerStack },
});

const AppContainer = createAppContainer(MainStack);

您可以使用各种组合。

为什么？

当您切换到另一个屏幕时，SwitchNavigator 会退出其他屏幕。所以你不能从已经辞职的屏幕上调用抽屉。

p.s：换屏时如果想刷新屏幕，可以使用navigation events。使用 onWillFocus.

React 导航 - 如何将 drawerNavigator 嵌套在 stackNavigator 中

React navigation - how to nest drawerNavigator inside stackNavigator

drawer

reactjs

react-native

react-navigation

为什么？