从选项卡“卸载”时如何重置反应导航？

Question

AuthStack所以我有一个像这样命名的堆栈const AuthStack = ({ resetPassword, updateEmail }: any) => (    <Stack.Navigator        screenOptions={{            cardStyle: { backgroundColor: '#F2F1F7' },            headerShown: true,            headerTitle: '',        }}    >        {resetPassword ? (            <Stack.Screen name="Reset Password">{(props: any) => <ResetPassword />}</Stack.Screen>        ) : updateEmail ? (            <Stack.Screen name="Update Email">{(props: any) => <UpdateEmail />}</Stack.Screen>        ) : (            <Stack.Screen name="Home">{(props: any) => <Home />}</Stack.Screen>        )}    </Stack.Navigator>)很高兴知道这是否是正确的方法。但基本上在我的帐户页面上，我有重置密码和更新电子邮件的链接。我将这两个都放在 AuthStack 中，因为我不确定这是否是最好的地方。无论如何这种工作，但是如果我点击“更新电子邮件”并导航到那里，如果我然后决定实际上我想去另一个页面并导航离开，如果我然后通过点击“主页”导航回来，它仍然带我到更新电子邮件页面。尽管此时我真的很想显示主屏幕。另外，如果我在它处于活动状态时单击主页，它也不会带我到那里。这意味着我再也看不到我的主页了。所以我想知道是否有某种类型的侦听器，当我离开此页面时，它会始终默认显示主页？有任何想法吗？而且我不想显示重置密码/更新电子邮件，因为它们有自己的选项卡，因此将它们隐藏在主页下。有更好的方法吗？

Answer 1

我真的不知道你为什么有条件地渲染屏幕，我认为你使用名称的方式很糟糕。您应该像 navigation.navigate('ForgotPassowrd') （屏幕名称）一样导航。它一直显示您更新电子邮件，因为主页不存在。

export const AuthNavigator = () => {

    return (

        <Stack.Navigator headerMode='none'>

            <Stack.Screen name='Home' component={SignupContainer}></Stack.Screen>

            <Stack.Screen name='ForgotPassword' component={ForgotPasswordContainer}></Stack.Screen>

            <Stack.Screen name='Update Email' component={UpdateEmailContainer}></Stack.Screen>

        </Stack.Navigator>

    );

};