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

【问题标题】：React Navigation Linking not working with conditional stack renderingReact Navigation Linking 不适用于条件堆栈渲染
【发布时间】：2021-07-14 03:56:43
【问题描述】：

我正在制作一个 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>
  );
}

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

【问题讨论】：

标签： javascript reactjs react-native react-navigation

【解决方案1】：

我想你忘了在 useEffect 数组 deps 上导入 data 变量，所以 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]);

【讨论】：