Question

我正在尝试迁移当前的代码库（反应导航4）以使用反应导航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，而堆栈的条件渲染替换了开关导航器。

在反应导航5中嵌套堆栈

1 个答案: