React native 从react native web（Expo）中AppStack（配置文件）中的页面链接（导航）到AuthStack（登录）中的页面

我正在使用react native web（expo）开发一个web应用程序。我正在使用uselinking实现“链接”，这样页面就可以具有类似web的属性（在新选项卡中打开、重新加载、返回按钮等等）。我正在尝试从另一个堆栈，配置文件页面导航到身份验证堆栈（登录页面）（基本上是使用异步存储注销用户）

带有linkto（/page/to/linkto）的导航在同一个堆栈中工作，但是当导航到另一个堆栈时，它不工作。我的链接对象在同一堆栈中工作正常。但不注册身份验证和加载堆栈。如何到达不同堆栈中的另一个屏幕。希望这是有道理的

依赖项：

"@expo/vector-icons": "10.2.1",
    "@react-native-community/masked-view": "0.1.10",
    "@react-native-community/picker": "^1.8.1",
    "@react-navigation/bottom-tabs": "^5.9.1",
    "@react-navigation/native": "^5.7.5",
    "@react-navigation/stack": "^5.9.2",
    "@turf/along": "^6.0.1",
    "@turf/helpers": "^6.1.4",
    "expo": "~39.0.2",
    "expo-linking": "^1.0.4",
    "expo-location": "^9.0.1",
    "expo-status-bar": "~1.0.2",
    "formik": "2.1.5",
    "mobx": "6.0.0",
    "mobx-react": "7.0.0",
    "mobx-state-tree": "3.17.2",
    "modal-enhanced-react-native-web": "0.2.0",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-39.0.4.tar.gz",
    "react-native-elements": "2.2.0",
    "react-native-geocoding": "^0.4.0",
    "react-native-gesture-handler": "~1.7.0",
    "react-native-google-places-autocomplete": "2.1.0-RC.0",
    "react-native-maps": "^0.27.1",
    "react-native-paper": "4.0.1",
    "react-native-reanimated": "~1.13.0",
    "react-native-responsive-fontsize": "^0.4.3",
    "react-native-responsive-screen": "^1.4.1",
    "react-native-safe-area-context": "3.1.4",
    "react-native-screens": "~2.10.1",
    "react-native-unimodules": "~0.11.0",
    "react-native-web": "^0.14.7",
    "react-navigation": "^4.4.3",
    "react-navigation-stack": "^2.8.2",
    "react-navigation-tabs": "2.9.0",
    "react-redux": "7.2.1",
    "redux": "4.0.5",
    "yup": "0.29.3"

代码：

从“React”导入React；
从“react native”导入{样式表、文本、视图、维度}；
进口{
导航容器，
链接选项，
useLinkTo，
}从“@react-navigation/native”；
从“@react navigation/stack”导入{createStackNavigator}；
从“@react navigation/bottom tabs”导入{createBottomTabNavigator}”；
从“世博链接”导入*作为链接；
进口{
宽度百分比TODP作为wp，
高度百分比TODP作为hp，
}从“反应本机响应屏幕”；
从“react navigation”导入{createAppContainer，createSwitchNavigator}；
从“@expo/vector icons”导入{MaterialIcons，Octicons，Feather}”；
从“/Screens/RiderRoute”导入骑乘设施；
从“/Screens/LandingPage”导入登录；
从“/屏幕/订单”导入订单；
从“/Screens/UserProfile”导入ProfileStack；
从“/Screens/UserSettings”导入设置；
从“/Screens/SellerMenu”进口食品；
从“/Screens/Home”导入餐厅；
从“/Screens/AddBankCard”导入AddBankCard；
从“/Screens/Confirmationpage”导入确认页面；
从“/Screens/Cart”导入购物车；
从“/Screens/Checkout”导入签出；
从“/Screens/ParcelRoute.js”导入包裹；
从“/Screens/Onboarding”导入入职；
从“/Screens/CustomerLogin”导入PhoneAuth；
从“/Screens/AcceptTandCs”导入AcceptTandCs；
从“/Newpage”导入新页面；
从“/assets/icon.png”导入图标；
const windowWidth=Dimensions.get（“窗口”）.width；
const windowHeight=尺寸。获取（“窗口”）。高度；
const prefix=Linking.makeUrl（“/”）；
常量链接={
前缀：[前缀]，
配置：{
屏幕：{
应用堆栈：{
路径：“家”，
初始路由名称：“登陆”，
屏幕：{
着陆：{path:“着陆”}，
餐厅：{
路径：“餐厅”，
},
食物：{
路径：“食物/：物品”，
},
getaride:{path:“getaride”}，
确认页：{路径：“确认页”}，
},
},
AuthStack：{
路径：“AuthStack”，
屏幕：{
入职：“入职”，
AcceptTandCs:“AcceptTandCs”，
PhoneAuth:“PhoneAuth”，
},
},
PaymentsStack:{path:“payments”，屏幕：{Orders:“Orders”}，
},
装载：{
路径：“加载”，
屏幕：{加载：“加载屏幕”}，
},
},
};
global.isLoggedIn=“1”；
常数设置策略=（）=>{
const Stack=createStackNavigator（）；
返回(
);
};
const HomeStack=（）=>{
const Stack=createStackNavigator（）；
返回(
);
};
const PaymentsStack=（）=>{
const Stack=createStackNavigator（）；
返回(
);
};
常量AuthStack=（）=>{
const Stack=createStackNavigator（）；
返回(
);
};
常量AppStack=（）=>{
返回(
(
),
}}
/>
(
),
}}
/>
(
),
}}
/>
(
),
}}
/>
);
};
常量加载屏幕=（）=>{
返回(
真菌成分
);
};
const Tabs=createBottomTabNavigator（）；
const AppSwitch=createSwitchNavigator(
{
认证：{
名称：“Auth”，
屏幕：AuthStack，//StackNavigator
路径：“Auth”，
},
应用堆栈：{
屏幕：AppStack，//BottoTabmNavigator
名称：“应用程序”，
路径：“应用程序”，
},
加载屏幕：{
屏幕：加载屏幕，//功能组件
名称：“加载”，
路径：“加载”，
},
},
{
initialRouteName:global.isLoggedIn==“0”？“身份验证”：“AppStack”，
}
);
const AppContainer=createAppContainer（AppSwitch）；
const Stack=createStackNavigator（）；
导出默认函数App（）{
返回窗口宽度>“600”(
哎呀，屏幕太大了，请用手机或模拟器
) : (
);
}
const styles=StyleSheet.create({
容器：{
弹性：1，
辩护内容：“中心”，
对齐项目：“中心”，
背景色：“2c3e50”，
},
});

   import React from "react";
import { StyleSheet, Text, View, Dimensions } from "react-native";
import {
  NavigationContainer,
  LinkingOptions,
  useLinkTo,
} from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import * as Linking from "expo-linking";
import {
  widthPercentageToDP as wp,
  heightPercentageToDP as hp,
} from "react-native-responsive-screen";
import { createAppContainer, createSwitchNavigator } from "react-navigation";
import { MaterialIcons, Octicons, Feather } from "@expo/vector-icons";
import Ride from "./Screens/RiderRoute";
import Landing from "./Screens/LandingPage";
import Orders from "./Screens/Orders";
import ProfileStack from "./Screens/UserProfile";
import Settings from "./Screens/UserSettings";
import Food from "./Screens/SellerMenu";
import Restaurants from "./Screens/Home";
import AddBankCard from "./Screens/AddBankCard";
import Confirmationpage from "./Screens/Confirmationpage";
import Cart from "./Screens/Cart";
import Checkout from "./Screens/Checkout";
import Parcel from "./Screens/ParcelRoute.js";
import Onboarding from "./Screens/Onboarding";
import PhoneAuth from "./Screens/CustomerLogin";
import AcceptTandCs from "./Screens/AcceptTandCs";
import Newpage from "./Newpage";
import icon from "./assets/icon.png";
const windowWidth = Dimensions.get("window").width;
const windowHeight = Dimensions.get("window").height;
const prefix = Linking.makeUrl("/");
const linking = {
  prefixes: [prefix],
  config: {
    screens: {
      AppStack: {
        path: "home",
        initialRouteName: "Landing",
        screens: {
          Landing: { path: "Landing" },
          Restaurants: {
            path: "Restaurants",
          },
          Food: {
            path: "Food/:item",
          },
          getaride: { path: "getaride" },
          Confirmationpage: { path: "Confirmationpage" },
        },
      },
      AuthStack: {
        path: "AuthStack",
        screens: {
          Onboarding: "Onboarding",
          AcceptTandCs: "AcceptTandCs",
          PhoneAuth: "PhoneAuth",
        },
      },
      PaymentsStack: { path: "payments", screens: { Orders: "Orders" } },
    },

    Loading: {
      path: "Loading",
      screens: { Loading: "LoadingScreen" },
    },
  },
};
global.isLoggedIn = "1";

const SettingsStack = () => {
  const Stack = createStackNavigator();

  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Settings"
        component={Settings}
        options={{ headerShown: false }}
      />
    </Stack.Navigator>
  );
};
const HomeStack = () => {
  const Stack = createStackNavigator();
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Landing"
        component={Landing}
        options={{ headerShown: false }}
      />
      <Stack.Screen
        name="Newpage"
        component={Newpage}
        options={{ headerShown: false }}
      />
      <Stack.Screen
        name="Confirmationpage"
        component={Confirmationpage}
        options={{ headerShown: false }}
      />
      <Stack.Screen
        name="Restaurants"
        component={Restaurants}
        options={{ headerShown: false }}
      />
      <Stack.Screen
        name="AddBankCard"
        component={AddBankCard}
        options={{ headerShown: false }}
      />
      <Stack.Screen
        name="Checkout"
        component={Checkout}
        options={{ headerShown: false }}
      />
      <Stack.Screen
        name="Parcel"
        component={Parcel}
        options={{ headerShown: false }}
      />

      <Stack.Screen
        name="Cart"
        component={Cart}
        options={{ headerShown: false }}
      />

      <Stack.Screen
        name="getaride"
        component={Ride}
        options={{ headerShown: false }}
      />
      <Stack.Screen
        name="Food"
        component={Food}
        options={{ headerShown: false }}
      />
    </Stack.Navigator>
  );
};
const PaymentsStack = () => {
  const Stack = createStackNavigator();

  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Orders"
        component={Orders}
        options={{ headerShown: false }}
      />
    </Stack.Navigator>
  );
};
const AuthStack = () => {
  const Stack = createStackNavigator();

  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Onboarding"
        component={Onboarding}
        options={{ headerShown: false }}
      />
      <Stack.Screen
        name="AcceptTandCs"
        component={AcceptTandCs}
        options={{ headerShown: false }}
      />
      <Stack.Screen
        name="PhoneAuth"
        component={PhoneAuth}
        options={{ headerShown: false }}
      />
    </Stack.Navigator>
  );
};
const AppStack = () => {
  return (
    <Tabs.Navigator>
      <Tabs.Screen
        name="HomeStack"
        component={HomeStack}
        options={{
          tabBarLabel: "Home",
          tabBarIcon: ({ color, size }) => (
            <Octicons name="home" color="black" size={wp(8)} />
          ),
        }}
      />
      <Tabs.Screen
        name="PaymentsStack"
        component={PaymentsStack}
        options={{
          tabBarLabel: "Payments",
          tabBarIcon: ({ color, size }) => (
            <MaterialIcons name="attach-money" size={wp(8)} color="black" />
          ),
        }}
      />
      <Tabs.Screen
        name="ProfileStack"
        component={ProfileStack}
        options={{
          tabBarLabel: "Profile",
          tabBarIcon: ({ color, size }) => (
            <MaterialIcons name="person-outline" color="#333" size={wp(8)} />
          ),
        }}
      />
      <Tabs.Screen
        name="SettingsStack"
        component={SettingsStack}
        options={{
          tabBarLabel: "settings",
          tabBarIcon: ({ color, size }) => (
            <Feather name="settings" color="#333" size={wp(8)} />
          ),
        }}
      />
    </Tabs.Navigator>
  );
};

const LoadingScreen = () => {
  return (
    <View style={styles.container}>
      <Text>MyComponent</Text>
    </View>
  );
};
const Tabs = createBottomTabNavigator();
const AppSwitch = createSwitchNavigator(
  {
    Auth: {
      name: "Auth",
      screen: AuthStack, //StackNavigator
      path: "Auth",
    },
    AppStack: {
      screen: AppStack, //BottoTabmNavigator
      name: "App",
      path: "App",
    },
    LoadingScreen: {
      screen: LoadingScreen, //Functional Component
      name: "Loading",
      path: "Loading",
    },
  },
  {
    initialRouteName: global.isLoggedIn === "0" ? "Auth" : "AppStack",
  }
);
const AppContainer = createAppContainer(AppSwitch);
const Stack = createStackNavigator();
export default function App() {
  return windowWidth > "600" ? (
    <View style={{ flex: 1, justifyContent: "center" }}>
      <Text style={{ alignSelf: "center" }}>
        "Oops,Screen size waay too big,please use a cellphone or an emulator "
      </Text>
    </View>
  ) : (
    <NavigationContainer linking={linking} fallback={<Text>Loading</Text>}>
      <AppContainer />
    </NavigationContainer>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#2c3e50",
  },
});