抽屉导航 react native paper

Question

我对 React 和 React Native 非常陌生。我需要一些关于在当前堆栈导航中嵌套抽屉导航器的帮助。

我有 Snack 的代码，如果有人可以帮助我，我将不胜感激。

https://snack.expo.dev/@smith.james1982/github.com-callstack-react-native-paper-login-template

我想使用 react-native-paper 将带有 Hamburger 和 Back Arrow 的抽屉导航放在主屏幕上。

非常感谢..

Answer 1

这就是我实现解决方案的方式，基本上是 2 次导航和使用状态共享库之间的使用。希望对某人有所帮助

import React, { memo, useState } from "react";

import { createStackNavigator } from "@react-navigation/stack";
import { createDrawerNavigator } from "@react-navigation/drawer";
import { NavigationContainer } from "@react-navigation/native";

import { HomeScreen, LoginScreen, RegisterScreen, ForgotPasswordScreen, Dashboard, Demo } from "./screens";

import { useLoginState } from "./core/state";
import { useBetween } from "use-between";

const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();

//Login navigation
const LoginNav = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          headerShown: false,
        }}
        initialRouteName="HomeScreen"
      >
        <Stack.Screen name="HomeScreen" component={HomeScreen} />
        <Stack.Screen name="LoginScreen" component={LoginScreen} />
        <Stack.Screen name="RegisterScreen" component={RegisterScreen} />
        <Stack.Screen name="ForgotPasswordScreen" component={ForgotPasswordScreen} />
        <Stack.Screen name="Dashboard" component={Dashboard} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

//Logged in Navigation
const LoggedInNav = () => {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={Demo} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
};

export default function App() {
  const { loggedIn, setIsLoggedIn } = useBetween(useLoginState);
  return loggedIn ? <LoggedInNav /> : <LoginNav />;
}

抽屉导航 react native paper

Drawer Navigation react native paper

react-native

react-native-paper