抽屉式导航位于选项卡导航内但位于顶部（原生反应）

Question

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

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

我正在为此使用反应导航库。我的问题是：这可能吗？如果是，我该如何在我的代码上实现它？

谢谢

Answer 1

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

配置文件选项卡应包含抽屉式导航器，并且应包含您的实际配置文件屏幕。

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

高层结构如下

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

您可以参考此来定制抽屉。希望能帮助到你。