仅当用户登录时才反应本机导航错误

Question

我可以选择浏览未登录或登录的欢迎屏幕（它显示更多功能）。 我以为我的导航配置正确，但我猜不是。 错误“带有有效负载的操作 NAVIGATE ... 未由任何导航器处理”让我相信这是因为我使用的是嵌套在另一个导航器中的一个导航器，但奇怪的是，如果用户未登录。只有在他们登录时才会发生。 主按钮调用此 signOut() function 以将其注销并返回主屏幕，或者如果他们未登录则仅返回主屏幕。我没有正确执行此操作吗？ 或者它仍然可能是我的嵌套导航问题，在这种情况下，为什么它只会在用户登录时给出错误？

function signOut(){
    if (user){
      auth
      .signOut()
      .then(() => navigation.navigate('StartScreen'));
    } else {
      navigation.navigate('StartScreen');
    }
  }

这是我的 AuthNavigator：

const Stack = createStackNavigator();

export default function AuthNavigator(){
    // Set an initializing state whilst Firebase connects
  const [initializing, setInitializing] = useState(true);
  const [user, setUser] = useState();

  // Handle user state changes
  function onAuthStateChanged(user) {
    setUser(user);
    if (initializing) setInitializing(false);
  }

  useEffect(() => {
    const subscriber = auth.onAuthStateChanged(onAuthStateChanged);
    return subscriber; // unsubscribe on unmount
  }, []);

  if (initializing) return null;

  if (user) {
    return (
      <MainHeader />
    );
  }

    return (
        <Stack.Navigator>
            <Stack.Screen name="StartScreen" component={StartScreen} options={{ headerShown: false }} />
            <Stack.Screen name="SignIn" component={SignIn} options={{ headerShown: false }} />
            <Stack.Screen name="SignUp" component={SignUp} options={{ headerShown: false }} />
            <Stack.Screen name="MainHeader" component={MainHeader} options={{ headerShown: false }} />
            <Stack.Screen name="ForgotPassword" component={ForgotPassword} options={{ headerShown: false }} />
        </Stack.Navigator>
    )
}

这是我在 MainHeader 屏幕中的嵌套选项卡导航器。 WelcomeScreen 具有执行 signOut() function 我首先列出的注销按钮：

export default function MainHeader() {
  var user = auth.currentUser;
  return (
    <>
      <View style={styles.headerContainer}>
        <Image
          style={styles.image}
          source={require("../assets/newheader4.png")}
        />
      </View>
      <Tab.Navigator
        tabBarOptions={{
          activeTintColor: "blue",
          inactiveTintColor: "black",
          style: {},
          tabStyle: {
            width: "auto",
            backgroundColor: "#e0d5f3",
            borderTopWidth: 3,
            borderBottomWidth: 3,
            borderRightColor: "gray",
          },
          labelStyle: {
            fontSize: 14,
            fontWeight: "bold",
          },
          scrollEnabled: true,
        }}
      >
        <Tab.Screen name="Home" component={WelcomeScreen} />
        <Tab.Screen name="All Deals" component={MessagesScreen} />
        <Tab.Screen name="My Favs" component={FavoritesScreen} />
        <Tab.Screen name="Notifications" component={Notifications} />
        <Tab.Screen name="Free Samples" component={FreeScreen} />
        <Tab.Screen name="Who We Are" component={WhoWeAreScreen} />
      </Tab.Navigator>
    </>
  );
}

Answer 1

解决方案：从 auth.signOut 之后的 then() 中完全删除导航线。 默认情况下它会执行此操作，并且在没有它的情况下完美地重定向到 StartScreen。

新签出 function：

function signOut(){
    if (user){
      auth
      .signOut()
      .then();
    } else {
      navigation.navigate('StartScreen');
    }
  }