React Navigation 5 - 所有屏幕（如 Twitter）中的堆栈、选项卡和抽屉导航

Question

我是 react native 的新手，我遇到了 react 导航问题，基本上我想在所有屏幕中同时使用底部选项卡和抽屉菜单，但是按照一些示例和教程，我没有得到我想要的。我希望抽屉菜单和底部选项卡出现在 Twitter 等所有屏幕中，侧边栏的每个屏幕都有底部选项卡，并且选项卡中的活动图标始终是主页图标。我尝试将底部选项卡组件放在抽屉内，但其他屏幕，如个人资料、日历、帐户设置（...），没有底部选项卡。

我的代码：

const Tabs = createBottomTabNavigator();
const Drawer = createDrawerNavigator();
const FeedStack = createStackNavigator();
const AppStack = createStackNavigator();

const FeedStackScreen = () => (
  <FeedStack.Navigator screenOptions={{ headerShown: false }}>
    <FeedStack.Screen name='Feed' component={FeedScreen} />
    <FeedStack.Screen name='AddEvent' component={AddEventScreen} />
    <FeedStack.Screen name='Event' component={EventScreen} />
  </FeedStack.Navigator>
);

const TabsScreen = () => (
  <Tabs.Navigator
    screenOptions={{ headerShown: false }}
    tabBarOptions={{ showLabel: false }}
    screenOptions={({ route }) => ({
      tabBarIcon: ({ focused, color }) => {
        let iconName;

        if (route.name === 'Feed') {
          iconName = focused ? 'home' : 'home';
          color = focused ? '#1ba8cf' : '#666666';
        } else if (route.name === 'Notifications') {
          iconName = focused ? 'bell' : 'bell';
          color = focused ? '#1ba8cf' : '#666666';
        }
        return (
          <FontAwesomeIcon
            icon={iconName}
            size={20}
            color={color}
            style={{ textAlignVertical: 'center' }}
          />
        );
      }
    })}
  >
    <Tabs.Screen name='Feed' component={FeedStackScreen} />
    <Tabs.Screen name='Notifications' component={NotificationsScreen} />
  </Tabs.Navigator>
);

const EventsCalendarStackScreen = () => (
  <EventsCalendarStack.Navigator screenOptions={{ headerShown: false }}>
    <EventsCalendarStack.Screen
      name='EventsCalendar'
      component={EventsCalendarScreen}
    />
  </EventsCalendarStack.Navigator>
);

const DrawerNavigatior = () => (
  <Drawer.Navigator
    drawerPosition='right'
    screenOptions={{ headerShown: false }}
    initialRouteName='Feed'
    drawerContent={(props) => Sidebar(props)}
  >
    <Drawer.Screen
      name='EventsCalendar'
      component={EventsCalendarStackScreen}
      options={{ title: 'Calendário' }}
    />
    <Drawer.Screen
      name='Configurations'
      component={ConfigurationsScreen}
      options={{ title: 'Configurações' }}
    />
    <Drawer.Screen
      name='About'
      component={AboutScreen}
      options={{ title: 'Descobre quem somos' }}
    />
    <Drawer.Screen
      name='Team'
      component={TeamScreen}
      options={{ title: 'Conhece a Equipa' }}
    />
    <Drawer.Screen
      name='Contact'
      component={ContactScreen}
      options={{ title: 'Contacto' }}
    />
    <Drawer.Screen
      name='Terms'
      component={TermsScreen}
      options={{ title: 'Termos' }}
    />
    <Drawer.Screen
      name='Policy'
      component={PolicyScreen}
      options={{ title: 'Política de Privacidade' }}
    />
  </Drawer.Navigator>
);

return (
  <MenuProvider>
    <NavigationContainer>
      <AppStack.Navigator screenOptions={{ headerShown: false }}>
        <AppStack.Screen name='Drawer' component={DrawerNavigatior} />
      </AppStack.Navigator>
    </NavigationContainer>
  </MenuProvider>
);

有人可以帮帮我吗？谢谢

Answer 1

基于React Navigation docs，您可以嵌套导航器。

要在更深的导航器中使用navigation.openDrawer()、navigation.closeDrawer() 或navigation.toggleDrawer()，您可以使用dispatch 中的navigation 对象并使用DrawerActions 向最近的抽屉导航器发出命令。

所以你可以像上面那样做：

//HomeStackScreen.js

import { DrawerActions } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack';
import { View, Text } from 'react-native';

const Stack = createStackNavigator();

const HomeScreen = () => (
  <View>
    <Text> Your Home View </Text>
  </View>
);

export default function HomeStackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="HomeScreen" component={HomeScreen} />
    <Stack.Navigator>
  );
}

HomeStackScreen.navigationOptions = ({navigation}) => ({
  //other options
  headerLeft: () => <YourButtonComponent onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())} />
});

//SearchStackScreen.js

import { DrawerActions } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack';
import { View, Text } from 'react-native';

const Stack = createStackNavigator();

const SearchScreen = () => (
  <View>
    <Text> Your Search View </Text>
  </View>
);

export default function SearchStackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="HomeScreen" component={SearchScreen} />
    <Stack.Navigator>
  );
}

SearchStackScreen.navigationOptions = ({navigation}) => ({
  //other options
  headerLeft: () => <YourButtonComponent onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())} />
});

//NotificationStackScreen.js

import { DrawerActions } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack';
import { View, Text } from 'react-native';

const Stack = createStackNavigator();

const NotificationScreen = () => (
  <View>
    <Text> Your Notification View </Text>
  </View>
);

export default function NotificationStackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="NotificationScreen" component={NotificationScreen} />
    <Stack.Navigator>
  );
}

NotificationStackScreen.navigationOptions = ({navigation}) => ({
  //other options
  headerLeft: () => <YourButtonComponent onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())} />
});

//DirectMessagesStackScreen.js

import { DrawerActions } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack';
import { View, Text } from 'react-native';

const Stack = createStackNavigator();

const DirectMessagesScreen = () => (
  <View>
    <Text> Your Direct Messages View </Text>
  </View>
);

export default function DirectMessagesStackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="DirectMessagesScreen" component={DirectMessagesScreen} />
    <Stack.Navigator>
  );
}

DirectMessagesStackScreen.navigationOptions = ({navigation}) => ({
  //other options
  headerLeft: () => <YourButtonComponent onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())} />
});

//BottomTabNavigator.js

import { createBottomTabNavigator } from '@react-navigation/bottom-tab'
import HomeStackScreen from './HomeStackScreen'
import SearchStackScreen from './SearchStackScreen'
import NotificationStackScreen from './NotificationStackScreen'
import DirectMessagesStackScreen from './DirectMessagesStackScreen'

const BottomTab = createBottomTabNavigator();

export default function BottomTabNavigator() {
  
  return (
    <BottomTab.Navigator>
      <BottomTab.Screen name="HomeStackScreen" component={HomeStackScreen} options={HomeStackScreen.navigationOptions}/>
      <BottomTab.Screen name="SearchStackScreen" component={SearchStackScreen} options={SearchStackScreen.navigationOptions}/>
      <BottomTab.Screen name="NotificationStackScreen" component={NotificationStackScreen} options={NotificationStackScreen.navigationOptions}/>
      <BottomTab.Screen name="DirectMessagesStackScreen" component={DirectMessagesStackScreen} options={DirectMessagesStackScreen.navigationOptions}/>
    </BottomTab.Navigator>
  )
}

//RootStack.js

import { NavigationContainer } from '@react-navigation/native'
import { createDrawerNavigator } from '@react-navigation/drawer'
import BottomTabNavigator from './BottomTabNavigator'

const Drawer = createDrawerNavigator();

export default function Root() {
  return (
    <NavigatorContainer>
      <Drawer.Navigator>
        <Drawer.Screen name="RootScreen" component={BottomTabNavigator} />
      </Drawer.Navigator>
    </NavigatorContainer>
  )

}