Question

首先，是的，我知道有很多与此问题相关的答案，但是我发现这种特定的方式可以使我的反应本机反应为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

将tab navigator放入drawer Navigator，然后将drawer Navigator放入stack navigator。

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

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

export default createAppContainer(MainStack);

如何通过单个导航文件在Tab Navigator的Stack Navigator中包含Drawer Navigator

1 个答案: