React导航链接不使用条件堆栈呈现

Question

我正在制作一个expo ( React -native)项目，并使用React导航。

我根据用户是否登录到我的应用程序来使用条件堆栈渲染。我还需要使用深度链接来连接到我的应用程序并打开特定的屏幕。当我从冷启动时使用url运行我的应用程序时，它工作得很好，但如果应用程序已经启动，并且我使用深度链接，它就不能工作(屏幕不变)。

下面是我的代码：

import React, { useState, useEffect } from "react";
import { NavigationContainer } from "@react-navigation/native";
import * as Linking from "expo-linking";

import useStore from "../Store";
import AuthStack from "./AuthStack";
import AppTabs from "./AppTabs";

const prefix = Linking.createURL("/");

export default function Routes() {
  const [data, setData] = useState();

// These are screens for the AuthStack only

  const linking = {
    prefixes: [prefix],
    config: {
      screens: {
        Login: "login",
        Register: "register",
        EmailValidation: "emailvalidation",
      },
    },
  };

  const handleDeepLink = (event) => {
    const eventData = Linking.parse(event.url);
    setData(eventData);
  };

  useEffect(() => {
    const getInitialUrl = async () => {
      const initialURL = await Linking.getInitialURL();
      if (initialURL) {
        setData(Linking.parse(initialURL));
      }
    };

    Linking.addEventListener("url", handleDeepLink);
    if (!data) {
      getInitialUrl();
    }
    return () => {
      Linking.removeEventListener("url", handleDeepLink);
    };
  }, []);

// Assuming the user variable is set to null or false

  return (
    <NavigationContainer linking={linking}>
      {user ? <AppTabs /> : <AuthStack />}
    </NavigationContainer>
  );
}

下面是auth stack屏幕：

import React from "react";
import { createStackNavigator } from "@react-navigation/stack";

import Login from "../Screens/Login";
import Register from "../Screens/Register";
import EmailValidation from "../Screens/EmailValidation";

const Stack = createStackNavigator();

export default function AuthStack() {
  return (
    <Stack.Navigator
      screenOptions={{
        header: () => null,
      }}
      initialRouteName="Login"
    >
      <Stack.Screen name="Login" component={Login} />
      <Stack.Screen name="Register" component={Register} />
      <Stack.Screen name="EmailValidation" component={EmailValidation} />
    </Stack.Navigator>
  );
}

感谢您的阅读，如果您需要更多信息/规格，请询问我。

Answer 1

我想您忘记了在useEffect数组deps上导入了 data 变量，因此数据的值没有正确更新

useEffect(() => {
    const getInitialUrl = async () => {
      const initialURL = await Linking.getInitialURL();
      if (initialURL) {
        setData(Linking.parse(initialURL));
      }
    };

    Linking.addEventListener("url", handleDeepLink);
    if (!data) {
      getInitialUrl();
    }
    return () => {
      Linking.removeEventListener("url", handleDeepLink);
    };
  }, [data]);