react-navigation 5中的嵌套堆栈

Question

我正在尝试迁移我当前的代码库（react-navigation 4）以使用 react-navigation 5。

我迁移前的代码：

AppNavigator.js

import { createAppContainer, createSwitchNavigator } from "react-navigation";

import { AuthLoading } from "../screens/auth";
import AuthStack from "./stacks/AuthStack";
import AppStack from "./stacks/AppStack";

export default createAppContainer(
  createSwitchNavigator(
    {
      AuthLoading: AuthLoading,
      Auth: AuthStack,
      App: AppStack,
    },
    { initialRouteName: "AuthLoading" }
  )
);

AuthStack.js 的示例

import { Auth, Registration, Login, VerifyAuth } from "../../screens/auth";

const AuthStack = createStackNavigator(
  {
    Auth: {
      screen: Auth,
    },
    Registration: {
      screen: Registration,
    },
    Login: {
      screen: Login,
    }
  },
  { initialRouteName: "Auth" }
);

export default AuthStack;

负责决定要渲染哪个堆栈的AuthLoading.js 函数如下所示：

import React, { useState, useEffect } from "react";
import { StatusBar, View } from "react-native";
import { ActivityIndicator } from "react-native-paper";
import TokensHandler from "../../api/TokensHandler";
import { useDispatch, useSelector } from "react-redux";
import { isUserExistsByToken, setIsUserExists } from "../../actions/authAction";

const AuthLoading = ({ navigation }) => {
  const dispatch = useDispatch();
  const isUserExists = useSelector((state) => state.auth.isUserExists);

  const [allowNavigate, setAllowNavigate] = useState(false);

  const fetchData = async () => {
    const token = await TokensHandler.getTokenFromDevice();

    if (token === null) {
      dispatch(setIsUserExists(false));
      setAllowNavigate(true);
    } else
      dispatch(isUserExistsByToken(token)).then(() => setAllowNavigate(true));
  };

  useEffect(() => {
    fetchData();
  }, []);

  useEffect(() => {
    if (allowNavigate || isUserExists != null)
      navigation.navigate(isUserExists ? "App" : "Auth");
  }, [allowNavigate, isUserExists]);

  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <ActivityIndicator size="large" />
      <StatusBar barStyle="default" />
    </View>
  );
};

export default AuthLoading;

我已阅读文档，但不幸的是，我找不到任何地方如何重构我的代码样板以使用 react-navigation 5。

我尝试过的：

AuthStack.js

import React from "react";
import { createStackNavigator } from "@react-navigation/stack";
import { Auth, Registration, Login, VerifyAuth } from "../../screens/auth";

const Stack = createStackNavigator();

const AuthStack = () => {
  return (
    <Stack.Navigator initialRouteName="Auth">
      <Stack.Screen name="Auth" component={Auth} />

      <Stack.Screen name="Registration" component={Registration} />

      <Stack.Screen name="Login" component={Login} />

    </Stack.Navigator>
  );
};

export default AuthStack;

我什至不知道怎么写AppNavigator.js，我试过了：

import React from "react";
import { useSelector } from "react-redux";

import { AuthLoading } from "../screens/auth";
import AuthStack from "./stacks/AuthStack";
import AppStack from "./stacks/AppStack";

const isLoggedIn = useSelector((state) => state.auth.isLoggedIn);
const Stack = createStackNavigator();

<Stack.Navigator>{isLoggedIn ? <AuthStack /> : <AppStack />}</Stack.Navigator>;

希望有任何帮助，

谢谢！

Answer 1

与您顶部的 AppNavigator 类似的代码如下所示

//Inside the functional component
return (
  <NavigationContainer>
    {isLoggedIn ? <AuthStack /> : <AppStack />}
  </NavigationContainer>
);

这里会在给定的时间渲染一个堆栈，一旦你更新了 redux 中的 isLogged 值，另一个堆栈就会被渲染。

要将其与 v4 中的代码进行比较： NavigationContainer 替换了 createAppContainer，堆栈的条件渲染替换了 switch navigator。