android - 如何使用单个导航文件将 Drawer Navigator 包含在 Tab Navigator 中的 Stack Navigator 中

Question

首先，是的，我知道有很多与此问题相关的答案，但我发现了这种在 react-native 0.60 中进行导航的特定方法，问题是，我还没有弄清楚，而且我不想刮掉这个导航方法来测试不同的方法，这是导航文件，不确定如何将抽屉放在里面的位置或方式。

const HomeStack = createStackNavigator(
  {
    Home: HomeScreen
  },
  {
    defaultNavigationOptions: {
      header: null
    }
  }
);

const VacationsStack = createStackNavigator(
  {
    Vacations: VacationsScreen,
    Request: RequestScreen
  },
  {
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: "#0091EA",
      },
      headerTintColor: "#FFF",
      title: "Vacaciones"
    }
  }
);

const HourAllocationsStack = createStackNavigator(
  {
    HourAllocations: HourAllocationsScreen,
    Allocations: AllocationsScreen
  },
  {
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: "#0091EA"
      },
      headerTintColor: "#FFF",
      title: "Registro"
    }
  }
);

const ExpensesStack = createStackNavigator(
  {
    Expenses: ExpensesScreen
  },
  {
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: "#0091EA"
      },
      headerTintColor: "#FFF",
      title: "Rendir"
    }
  }
);

const CertificatesStack = createStackNavigator(
  {
    Certificates: CertificatesScreen
  },
  {
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: "#0091EA"
      },
      headerTintColor: "#FFF",
      title: "Certificados"
    }
  }
);

const MainApp = createBottomTabNavigator(
  {
    Home: HomeStack,
    Vacations: VacationsStack,
    HourAllocations: HourAllocationsStack,
    Expenses: ExpensesStack,
    Certificates: CertificatesStack
  },
  {
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarIcon: () => {
        const { routeName } = navigation.state;
        if (routeName === "Home") {
          return (
            <Icon name="home" size={ 25 } color="gray"/>
          );
        }
        if (routeName === "Vacations") {
          return (
            <Icon5 name="sun" solid size={ 25 } color="gray"/>
          );
        }
        if (routeName === "Expenses") {
          return (
            <Icon5 name="plane" size={ 25 } color="gray"/>
          );
        }
        if (routeName === "Certificates") {
          return(
            <Icon name="bill" size={ 25 } color="gray"/>
          );
        }
        if (routeName === "HourAllocations") {
          return(
            <Icon name="clock" solid size={ 25 } color="gray"/>
          );
        }
      }
    }),
    tabBarOptions: {
      activeTintColor: "#FF6F00",
      inactiveTintColor: "#263238"
    },
  }
);

const DrawerNavigation = createDrawerNavigator({
  User: UserScreen,
  Settings: SettingsScreen
})

export default createAppContainer(MainApp);

Answer 1

将选项卡导航器放入抽屉式导航器中，并将抽屉式导航器放入堆栈导航器中。

const DrawerNavigation = createDrawerNavigator({
  User: UserScreen,
  Settings: SettingsScreen,
  MainTab : MainApp
},
{
 initialRouteName : 'MainTab'
})

...
const MainStack = createStackNavigator(
  {
    MainScreen: DrawerNavigation
  },
  {
   initialRouteName : 'MainScreen' 
  }
);

export default createAppContainer(MainStack);