React Navigation Linking不适用于条件堆栈渲染

Question

我正在制作一个expo(react native(项目，并使用react Navigation。

我使用基于用户是否登录到我的应用程序的条件堆栈渲染。我还需要使用深度链接来连接到我的应用程序并打开特定的屏幕。当我用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>
);
}

这是身份验证堆栈屏幕：

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上导入数据变量，所以数据值没有正确更新

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