Question

我想要一个带有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的第一个元素，则只能在第一个Tab上访问DrawerNavigation，但不能在所有其他选项卡上访问。副Versa一样。如果将TabsScreen放到DrawerScreen的第一个元素中，则只能在DrawerScreen的第一个元素上访问这些选项卡。

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

有什么想法吗？：-）

Answer 1

您需要将@IBAction func createGoalButton(_ sender: UIButton) { let x = "You never added a goal" let y = "You never added a date" let z = "You never added a description" self.goalAdd = goalInput.text ?? print(x) self.dateAdd = dateInput.text ?? print(y) self.descriptionAdd = descriptionInput.text ?? print(z) performSegue(withIdentifier: "createGoalSegue", sender: self) }定义为TabNavigator的子屏幕。这样，抽屉随处可见。

DrawerNavigator

React-Native：所有标签上的抽屉导航器（react-navigation v5）

1 个答案: