Question

我是本机反应的新手，我在反应导航方面遇到了问题，基本上我想在所有屏幕上同时使用底部的选项卡和抽屉菜单，但是按照一些示例和教程操作，我并没有得到我想要的东西。我希望抽屉菜单和底部选项卡出现在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>
  )

}

React Navigation 5-在所有屏幕（如Twitter）上的堆栈，标签和抽屉式导航

1 个答案: