2

我想要一个带有 BottomTabNavigation 的应用程序。此外，我希望所有选项卡都可以使用 DrawerNavigation 。

我的AppNavigator.js包含以下内容。我只能“访问” TabNavigator。抽屉不可访问。

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer, StackActions, StackNavigator } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer'; 

const Tabs = createBottomTabNavigator();
const TabsScreen = () => (
  <Tabs.Navigator>
    <Tabs.Screen name="Page1" component={Page1} />
    <Tabs.Screen name="Page2" component={Page2} />
    <Tabs.Screen name="Page3" component={Page3} />
    <Tabs.Screen name="Page4" component={Page4} />
  </Tabs.Navigator>
)

const Drawer = createDrawerNavigator();
const DrawerScreen = () => (
  <Drawer.Navigator>
    <Drawer.Screen name="Drawer-Item1" component={Drawer-Item1} />
    <Drawer.Screen name="Drawer-Item2" component={Drawer-Item2} />
  </Drawer.Navigator>
)

const Stack = createStackNavigator();
export default () => (
  <NavigationContainer>
    <Stack.Navigator>
      <Stack.Screen name="Tabs" component={TabsScreen} />
      <Stack.Screen name="Drawer" component={DrawerScreen} />
    </Stack.Navigator>
  </NavigationContainer>
)

如果我将 DrawerScreen 放入 TabsScreen 的第一个元素中，则 DrawerNavigation 只能在第一个选项卡上访问，而不能在所有其他选项卡上访问。反之亦然。如果我将 TabsScreen 放入 DrawerScreen 的第一个元素，则只能在 DrawerScreen 的第一个元素处访问选项卡。

如何在所有选项卡中访问抽屉？我希望将选项卡作为我的主要导航，但因为有更多菜单选项，我希望用户能够从所有视图访问抽屉。每个选项卡都有自己的屏幕，具有自己的功能。当我打开抽屉并访问一个抽屉条目时，它会打开另一个屏幕，这也是“主”选项卡导航。

有任何想法吗？:-)

4

1 回答 1

0

您需要将 定义TabNavigator为 的子屏幕DrawerNavigator。这样，抽屉将随处可用。

const Tabs = createBottomTabNavigator();
const TabsScreen = () => (
  <Tabs.Navigator>
    <Tabs.Screen name="Page1" component={Page1} />
    <Tabs.Screen name="Page2" component={Page2} />
    <Tabs.Screen name="Page3" component={Page3} />
    <Tabs.Screen name="Page4" component={Page4} />
  </Tabs.Navigator>
)

const Drawer = createDrawerNavigator();
const DrawerScreen = () => (
  <Drawer.Navigator>
    <Drawer.Screen name="Tabs" component={TabsScreen} />
    <Drawer.Screen name="Drawer-Item1" component={Drawer-Item1} />
    <Drawer.Screen name="Drawer-Item2" component={Drawer-Item2} />
  </Drawer.Navigator>
)

const Stack = createStackNavigator();
export default () => (
  <NavigationContainer>
    <Stack.Navigator>
      <Stack.Screen name="Drawer" component={DrawerScreen} />
    </Stack.Navigator>
  </NavigationContainer>
)
于 2020-04-19T00:48:55.313 回答