时间戳

首页 > 解决方案 > 抽屉导航反应原生纸

react-native - 抽屉导航反应原生纸

问题描述

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

我有 Snack 上的代码，如果有人可以帮助我，我将非常感激。

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

我想使用 react-native-paper 在主屏幕上放置带有汉堡包和后退箭头的抽屉导航。

首先十分感谢..

标签： react-nativereact-native-paper

解决方案

这就是我实现解决方案的方式，基本上是 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 />;
}

推荐阅读