如何从“抽屉导航”中隐藏一些页面，但仍然能够导航到它们-React Native？

问题描述

我想从抽屉中隐藏一些页面

我想从抽屉中隐藏一些页面（例如，隐藏SignUpPage和Successpage），该怎么办？
我也尝试在DrawerLabel [（）=> null]中创建一个匿名函数，但这仍然不是一个好的解决方案，因为即使它向我显示了一个空标签，但是当我单击它时，它仍将我导航到该页面我想隐藏。

请帮助 并感谢所有帮助者：）

import { createDrawerNavigator } from '@react-navigation/drawer'; 
const Drawer = createDrawerNavigator();

function DrawerNavigator() {
  return (
    <Drawer.Navigator initialRouteName="WelcomePage">
     
     //...all the pages
      <Drawer.Screen
        name="HomePage"
        component={HomePage}
        options={{ drawerLabel: 'Home Page' }}
      />
      <Drawer.Screen
        name="SignUpPage"
        component={SignUpPage}
        options={{ drawerLabel: 'SignUp Page' }}
      />
      <Drawer.Screen
        name="Successpage"
        component={Successpage}
        options={{ drawerLabel: 'Successpage' }}
      />
    </Drawer.Navigator>
  );
}


const Stack = createStackNavigator();

export default function App() {
  return (
    < NavigationContainer >
     

      <DrawerNavigator>

        <Stack.Navigator initialRouterName="WelcomePage">
          <Stack.Screen name="WelcomePage" component={WelcomePage} />
          >
          <Stack.Screen name="Successpage" component={Successpage} />
          <Stack.Screen name="HomePage" component={HomePage} />

        </Stack.Navigator>

      </DrawerNavigator>
    </NavigationContainer >
  );
}

解决方法

您有其他选择 我猜您想在用户未签名时就隐藏这些选项。使用v5，您可以执行以下代码。另一个选项是相同的，但是使用自定义内容有点复杂，如果您需要复杂的解决方案https://reactnavigation.org/docs/drawer-navigator，我也会给您提供文档。 DrawerNavigator

const Drawer = createDrawerNavigator();

function DrawerNavigator() {
  return (
    <Drawer.Navigator initialRouteName="WelcomePage">
     
     //...all the pages
      <Drawer.Screen
        name="HomePage"
        component={HomePage}
        options={{ drawerLabel: 'Home Page' }}
      />
    </Drawer.Navigator>
  );
}

AuthNavigator

const Stack = createStackNavigator<AuthParamList>();
export const AuthNavigator = () => {
    return (
        <Stack.Navigator headerMode='none'>
            <Stack.Screen name='SignUpPage' component={SignUpPage}></Stack.Screen>
            <Stack.Screen name='SuccessPage' component={SuccessPage}></Stack.Screen>
        </Stack.Navigator>
    );
};

IsAuthScreen，我使用firebase + redux，所以这里需要输入登录逻辑

const IsAuth: React.FC<RoutesProps> = (props) => {
    const { eva,...rest } = props;
    const dispatch = useDispatch();
    const onAuthStateChanged = (currentUser: any) => {
        console.log("onAuthStateChanged -> currentUser",currentUser)
        if (!currentUser) {
            dispatch(new authActions.DidTryLogin());
        } else {
            if (!currentUser.emailVerified) {
                dispatch(new authActions.DidTryLogin());
            } else {
                dispatch(new authActions.SigninSuccess(currentUser));
                dispatch(new settingsActions.GetProfile(currentUser.uid));
            }
        }
    };
    useEffect(() => {
        
        const subscriber = firebase.auth().onAuthStateChanged(onAuthStateChanged);

        return () => {
            subscriber();
        }; // unsubscribe on unmount
    },[dispatch]);

    return (<View >
        <LoadingIndicator size='large' /> // Here put a loading component
    </View>);
};

应用程序组件，我使用redux来检查用户是否已登录，因此在这里您需要输入自己的逻辑

const isAuth = useSelector(selectAuthUser);
const didTryAutoLogin = useSelector(selectAuthDidTryLogin);
return (
<NavigationContainer>
            {isAuth && <DrawerNavigator />}
            {!isAuth && didTryAutoLogin && && <AuthNavigator />}
            {!isAuth && !didTryAutoLogin && <IsAuthScreen />}
        </NavigationContainer>);

因此，当您注销时，无需导航至SignInScreen（如果您考虑一下，这将是一个问题，因为如果要这样做，可以使用“后退”按钮或手势返回到受保护的屏幕）。您只需要更新状态，正确的导航器就位，可以显示默认屏幕。您可以使用redux或对上下文进行响应。