Question

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

我的代码：

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>
);

首先，我不希望“标签”出现在抽屉菜单上。其次，我希望抽屉中的所有屏幕都具有底部标签。

有人可以帮助我吗？谢谢

React Navigation 5-在所有屏幕中使用堆栈，标签和抽屉式导航

0 个答案: