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

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 = () => {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <Stack.Navigator headerMode='none'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Stack.Screen name='Home' component={SignupContainer}></Stack.Screen>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Stack.Screen name='ForgotPassword' component={ForgotPasswordContainer}></Stack.Screen>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Stack.Screen name='Update Email' component={UpdateEmailContainer}></Stack.Screen>&nbsp; &nbsp; &nbsp; &nbsp; </Stack.Navigator>&nbsp; &nbsp; );};