选项卡导航内部的抽屉导航，但在顶部（反应原生）

Question

我正在编写一个类似于 Instagram 的 React Native 应用程序。我已经有一个包含 5 个项目的底部选项卡导航器，最后一个是配置文件选项卡。

在此配置文件选项卡内，我想要一个抽屉导航器来管理配置文件设置，我希望此抽屉仅在此选项卡内“可绘制”，而不是其他抽屉。但我也希望抽屉同时显示在选项卡导航器的顶部（就像 instagram 一样）。

我为此使用了 react-navigation 库。我的问题是：这可能吗？如果是，我该如何在我的代码中实现它？

谢谢

Answer 1

您可以将底部标签导航器包装在抽屉导航器中。
这样，抽屉将始终显示在底部选项卡的顶部。
任何从底部标签页打开抽屉的尝试都会冒泡到抽屉导航器并最终导致抽屉被打开。

const Drawer = createDrawerNavigator();
const Tab = createBottomTabNavigator();

function BottomTabsNavigator() {
  return (
    <Tab.Navigator>
      <Tab.Screen
        name="tab1"
        component={Component1}
      />
      <Tab.Screen
        name="tab2"
        component={Component2}
      />
      <Tab.Screen
        name="tab3"
        component={Component3}
      />
    </Tab.Navigator>
  )
}
    

function MainNavigator() {
  return (
    <Drawer.Navigaton>
      <Drawer.Screen name="drawer" component={BottomTabsNavigator} />
    </Drawer.Navigator>
  )
}

export default function App() {
  return (
    <NavigationContainer>
      <MainNavigator/>
    </NavigationContainer>
  )
}

您当然可以实现一个自定义的抽屉组件，并将其替换为默认抽屉（使用drawerContent 道具）以显示您想要的任何项目。

Answer 2

您必须在选项卡导航器中嵌套一个抽屉导航器。

个人资料选项卡应该包含一个抽屉导航器，并且应该包含您的实际个人资料屏幕。

如果您想将您的抽屉自定义为通知页面，您应该在那里提供自定义视图。

高层结构如下

const Drawer = createDrawerNavigator();
const Tab = createBottomTabNavigator();

function AppDraw() {
  return (
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Notifications" component={NotificationsScreen} />
      </Drawer.Navigator>
  );
}

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={AppDraw} />
    </Tab.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <MyTabs />
    </NavigationContainer>
  );
}

您可以参考this 自定义抽屉。 希望对您有所帮助。