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

Question

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

我想从抽屉中隐藏一些页面(例如隐藏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 >
);
}

Answer 1

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

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或react上下文来实现这一点。