DrawerNavigator для постоянного отображения панели вкладок при нажатии каждой опции

Question 1

Я пытаюсь создать панель вкладок, и каждая панель вкладок имеет свой собственный навигатор стека. У меня есть три вкладки - это настройки домашнего профиля.

Я хочу также показать эти три варианта в ящике. Я создал ящик, но только при нажатии на главную отображается панель вкладок. Я хочу показать панель вкладок, как если бы вы нажали вкладку профиля, и панель вкладок останется там.

Tabs with their stack navigators

Side drawer with same options

Tapping profile from drawer hides tab bar

Вот мой код:

const HomeStackNavigator = createStackNavigator();
export const HomeNavigator = () => {
  return (
    <HomeStackNavigator.Navigator screenOptions={defaultNavOptions}>
      <HomeStackNavigator.Screen
        name="Home"
        component={HomeScreen}
        options={homeScreenOptions}
      />
       <HomeStackNavigator.Screen
        name="Details"
        component={DetailsScreen}
        options={detailsScreenOptions}
      />
    </HomeStackNavigator.Navigator>
  );
};

const ProfileStackNavigator = createStackNavigator();
export const ProfileNavigator = () => {
  return (
    <ProfileStackNavigator.Navigator screenOptions={defaultNavOptions}>
      <ProfileStackNavigator.Screen
        name="Profile"
        component={ProfileScreen}
        options={profileScreenOptions}
      />
       <ProfileStackNavigator.Screen
        name="EditProfile"
        component={EditProfileScreen}
        options={editProfileScreenOptions}
      />
    </ProfileStackNavigator.Navigator>
  );
};

const SettingsStackNavigator = createStackNavigator();
export const SettingsNavigator = () => {
  return (
    <SettingsStackNavigator.Navigator screenOptions={defaultNavOptions}>
      <SettingsStackNavigator.Screen
        name="Settings"
        component={SettingsScreen}
        options={settingsScreenOptions}
      />
       <SettingsStackNavigator.Screen
        name="AccountDetail"
        component={AccountDetailsScreen}
        options={accountDetailsScreenOptions}
      />
    </SettingsStackNavigator.Navigator>
  );
};




const HomeTabNavigator = createBottomTabNavigator();
export const TabNavigator = () => {
  return (
    <HomeTabNavigator.Navigator screenOptions={defaultNavOptions}>
      <HomeTabNavigator.Screen
        name="Home"
        component={HomeNavigator}
        options={{
          tabBarLabel: 'Home',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="home" color={color} size={size} />
          ),
        }}
      />
       <HomeTabNavigator.Screen
        name="Profile"
        component={ProfileNavigator}
        options={{
          tabBarLabel: 'Profile',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="face-profile" color={color} size={size} />
          ),
        }}
      />
      <HomeTabNavigator.Screen
        name="Settings"
        component={SettingsNavigator}
        options={{
          tabBarLabel: 'Settings',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="account-settings" color={color} size={size} />
          ),
        }}
      />
    </HomeTabNavigator.Navigator>
  );
};



const AppDrawer = createDrawerNavigator();
export const Drawer = () => {
  return(
      <AppDrawer.Navigator initialRouteName="Home">
        <AppDrawer.Screen name="Home" component={TabNavigator} />
        <AppDrawer.Screen name="Profile" component={ProfileNavigator} />
        <AppDrawer.Screen name="Settings" component={SettingsNavigator} />
      </AppDrawer.Navigator>
  )
};

Моя цель - постоянно иметь вкладки. Вкладки должны скрываться только в том случае, если мы переходим на страницу сведений о любой из вкладок.

react-native react-navigation navigation-drawer react-navigation-bottom-tab

2

AKumar 2 Окт 2020 в 10:49

Answer

Вы можете сделать свой TabNavigator экраном навигатора стека, который является экраном вашего навигатора ящика, и передать настраиваемый компонент ящика в навигатор ящика:

const AppDrawer = createDrawerNavigator();
const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();
const HomeTabNavigator = createBottomTabNavigator();

export const TabNavigator = () => {
  return (
    <HomeTabNavigator.Navigator>
      <HomeTabNavigator.Screen
        name="Home"
        component={HomeScreen}
        options={{
          tabBarLabel: 'Home',
        }}
      />
      <HomeTabNavigator.Screen
        name="Profile"
        component={ProfileScreen}
        options={{
          tabBarLabel: 'Profile',
        }}
      />
      <HomeTabNavigator.Screen
        name="Settings"
        component={SettingsScreen}
        options={{
          tabBarLabel: 'Settings',
        }}
      />
    </HomeTabNavigator.Navigator>
  );
};

function CustomDrawerContent(props) {
  return (
    <DrawerContentScrollView {...props}>
      <DrawerItem
        label="Home"
        onPress={() => props.navigation.navigate('Home')}
      />
      <DrawerItem
        label="Profile"
        onPress={() => props.navigation.navigate('Profile')}
      />
      <DrawerItem
        label="Settings"
        onPress={() => props.navigation.navigate('Settings')}
      />
    </DrawerContentScrollView>
  );
}

function getHeaderTitle(route) {
  return getFocusedRouteNameFromRoute(route) ?? 'Home';
}

const StackNavigator = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Tabs"
        component={TabNavigator}
        options={({route}) => ({
          headerTitle: getHeaderTitle(route),
        })}
      />
      <Stack.Screen name="EditProfile" component={EditProfileScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
      <Stack.Screen name="AccountDetail" component={AccountDetailsScreen} />
    </Stack.Navigator>
  );
};

export const Drawer = () => {
  return (
    <AppDrawer.Navigator
      initialRouteName="Home"
      drawerContent={(props) => <CustomDrawerContent {...props} />}>
      <AppDrawer.Screen name="Stack" component={StackNavigator} />
    </AppDrawer.Navigator>
  );
};

function App() {
  return (
    <NavigationContainer>
      <Drawer />
    </NavigationContainer>
  );
}

Экраны, для которых вы не хотите отображать вкладки, можно поместить в навигатор стека за пределами навигатора вкладок.

Источники:

Обязательно импортируйте DrawerItem, DrawerContentScrollView из @react-navigation/drawer и getFocusedRouteNameFromRoute из @react-navigation/native.

1

Bas van der Linden 2 Окт 2020 в 17:31

Question 2

Вы можете сделать свой TabNavigator экраном навигатора стека, который является экраном вашего навигатора ящика, и передать настраиваемый компонент ящика в навигатор ящика:

const AppDrawer = createDrawerNavigator();
const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();
const HomeTabNavigator = createBottomTabNavigator();

export const TabNavigator = () => {
  return (
    <HomeTabNavigator.Navigator>
      <HomeTabNavigator.Screen
        name="Home"
        component={HomeScreen}
        options={{
          tabBarLabel: 'Home',
        }}
      />
      <HomeTabNavigator.Screen
        name="Profile"
        component={ProfileScreen}
        options={{
          tabBarLabel: 'Profile',
        }}
      />
      <HomeTabNavigator.Screen
        name="Settings"
        component={SettingsScreen}
        options={{
          tabBarLabel: 'Settings',
        }}
      />
    </HomeTabNavigator.Navigator>
  );
};

function CustomDrawerContent(props) {
  return (
    <DrawerContentScrollView {...props}>
      <DrawerItem
        label="Home"
        onPress={() => props.navigation.navigate('Home')}
      />
      <DrawerItem
        label="Profile"
        onPress={() => props.navigation.navigate('Profile')}
      />
      <DrawerItem
        label="Settings"
        onPress={() => props.navigation.navigate('Settings')}
      />
    </DrawerContentScrollView>
  );
}

function getHeaderTitle(route) {
  return getFocusedRouteNameFromRoute(route) ?? 'Home';
}

const StackNavigator = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Tabs"
        component={TabNavigator}
        options={({route}) => ({
          headerTitle: getHeaderTitle(route),
        })}
      />
      <Stack.Screen name="EditProfile" component={EditProfileScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
      <Stack.Screen name="AccountDetail" component={AccountDetailsScreen} />
    </Stack.Navigator>
  );
};

export const Drawer = () => {
  return (
    <AppDrawer.Navigator
      initialRouteName="Home"
      drawerContent={(props) => <CustomDrawerContent {...props} />}>
      <AppDrawer.Screen name="Stack" component={StackNavigator} />
    </AppDrawer.Navigator>
  );
};

function App() {
  return (
    <NavigationContainer>
      <Drawer />
    </NavigationContainer>
  );
}

Экраны, для которых вы не хотите отображать вкладки, можно поместить в навигатор стека за пределами навигатора вкладок.

Источники:

Обязательно импортируйте DrawerItem, DrawerContentScrollView из @react-navigation/drawer и getFocusedRouteNameFromRoute из @react-navigation/native.

1

Bas van der Linden 2 Окт 2020 в 17:31

DrawerNavigator для постоянного отображения панели вкладок при нажатии каждой опции

1 ответ

Похожие вопросы

Связанные вопросы

Новые вопросы

react-native