react中的嵌套堆栈-导航5

Question

我正在尝试迁移我当前的代码库(react-Navigation4)来使用react-Navigation5。

迁移前的代码：

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-Navigation5的方法。

我尝试过的：

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>
);

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

将其与v4中的代码进行比较: NavigationContainer替换了createAppContainer，堆栈的条件呈现替换了切换导航器。