需要 React 导航抽屉和堆栈导航方面的帮助

Question

这里有人可以分享一个示例，说明如何为不受保护的路由实现 Stack 导航器和为受保护的路由实现 Drawer 导航器吗？

我已经这样做了，但是它根本不起作用..对此很陌生，请帮忙

// Navigation Components
import DrawerNavigator from './DrawerNavigator';
import StackNavigator from './StackNavigator';

const AppNav = () => {
  const [Auth, setAuth] = useState(null);

  useEffect(() => {
    const checkAuth = async () => {
      const token = await getToken();
      console.log('token AppNav: ', token);
      if (token) {
        setAuth(true);
      } else {
        setAuth(false);
      }
    };
    checkAuth();
  }, []);

  const Routes = [
    {
      name: 'Home',
      component: Home,
      isAuth: true,
    },
    {
      name: 'Login',
      component: Login,
      isAuth: false,
    },
    {
      name: 'OTPScreen',
      component: OTPScreen,
      isAuth: false,
    },
    {
      name: 'ResetPassword',
      component: ResetPassword,
      isAuth: false,
    },
    {
      name: 'SignUp',
      component: SignUp,
      isAuth: false,
    },
  ];

  return (
    <NavigationContainer>
      {Auth ? <DrawerNavigator routes={Routes} /> : <StackNavigator routes={Routes} />}
    </NavigationContainer>
  );
};

export default AppNav;

抽屉导航器

import React from 'react';
import { createDrawerNavigator } from '@react-navigation/drawer';
import PropTypes from 'prop-types';

// Utils
import { uniqueId } from '../common/utils';

const Drawer = createDrawerNavigator();

const DrawerNavigator = ({ routes }) => {
  const authRoutes = routes.filter((route) => route.isAuth);
  return (
    <Drawer.Navigator screenOptions={{ headerShown: false }}>
      {authRoutes.map((route) => (
        <Drawer.Screen key={uniqueId('drawer')} name={route.name} component={route.component} />
      ))}
    </Drawer.Navigator>
  );
};

DrawerNavigator.propTypes = {
  routes: PropTypes.arrayOf(PropTypes.object).isRequired,
};

export default DrawerNavigator;

堆栈导航器

import React from 'react';
import PropTypes from 'prop-types';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

// Utils
import { uniqueId } from '../common/utils';

const Stack = createNativeStackNavigator();

const StackNavigator = ({ routes }) => (
  <Stack.Navigator screenOptions={{ headerShown: false }}>
    {routes.map((route) => (
      <Stack.Screen key={uniqueId('navigator')} name={route.name} component={route.component} />
    ))}
  </Stack.Navigator>
);

StackNavigator.propTypes = {
  routes: PropTypes.arrayOf(PropTypes.object).isRequired,
};

export default StackNavigator;

我的这个解决方案最大的问题是，如果您已登录，它可以从 Stack Navigator 中找到路线。因此，如果您想在注销功能中使用 navigation.navigate 将用户定向到登录屏幕它又说了以下内容

The action 'NAVIGATE' with payload {"name":"Login"} was not handled by any navigator.

Do you have a screen named 'Login'?

If you're trying to navigate to a screen in a nested navigator, see https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator.

This is a development-only warning and won't be shown in production.

即使令牌为空，它也总是进入主屏幕，我确实知道我没有做对，我不知道该去哪里让它正常工作。

Answer 1

你只依赖 usestate，一旦用户注销，auth 值就不会改变，这就是为什么你需要像 redux 或 context 这样的全局全局状态管理

const [Auth, setAuth] = useState(null);

检查这个线程在 React Native 中访问上下文

上下文示例

import React from 'react';
import { View, Text, Button } from 'react-native';
import { useMain } from './context/Context';

const Child = () => {
  const { dummy, setDummy } = useMain();
  const onPressLearnMore = () => {
    setDummy('c');
  };
  return (
    <View>
      <Text>This children {dummy}</Text>
      <Button onPress={onPressLearnMore} title="click" />
    </View>
  );
};

export default Child;