当嵌套导航器在 android 和 ios 中反应原生时,反应导航 5 深层链接不起作用

问题描述

我有嵌套的堆栈导航器,首先是启动和登录堆栈导航器,然后是底部选项卡导航器,其中我有五个堆栈导航器,如主页堆栈、搜索堆栈、帮助支持、设置堆栈和配置文件堆栈导航器以及详细信息导航器但剧集详细信息导航器在(主堆栈导航器和选项卡导航器)之外。我如何为此创建配置路径,通常我只是从家庭导航器中导航.navigate(details)。 我的配置深层链接在应用打开时有效,但当应用关闭时,它打开了页面但不返回。

    xcrun simctl openurl booted bhpsApp://episode/episodedetails/182
    import 'react-native-gesture-handler'
import * as React from 'react'
import {createStackNavigator} from '@react-navigation/stack'
import {NavigationContainer,StackActions} from '@react-navigation/native'
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'
import {Image,Text} from 'react-native'
import {RouteKeys,SCREEN_TITLE} from './RouteKeys'
import SplashScreen from '../screens/OnBoardingScreens/SplashScreen'
import LoginScreen from '../screens/AuthenticationScreens/loginScreen'
import HomeScreen from '../screens/HomeContainer/homeScreen'
import Images from '../assets/AppImages'
import {Colors,Strings,Scaling} from '../constants'
import SettingsScreen from '../screens/SettingsScreens/settingsScreen'
import EdpisodeDetailScreen from '../screens/HomeContainer/edpisodeDetailScreen'
import NotificationsScreen from '../screens/NotificationScreen'
import SearchScreen from '../screens/SearchScreens/searchScreen'
import MyProfileScreen from '../screens/MyProfileScreens/myProfileScreen'
import HelpAndSupportScreen from '../screens/ChatScreens/helpAndSupport'
import LocationConatainer from '../common/components/LocationConatainer'
import MapScreen from '../screens/SearchScreens/mapScreen/MapScreen'
import ListViewScreen from '../screens/SearchScreens/listViewScreen/ListViewScreen'
import LocationDetailScreen from '../screens/SearchScreens/locationDetailScreen'
import DrawerModal from '../common/components/DrawerModal'
import {useTheme} from '../screens/Themes'
import AsyncStorage from '@react-native-async-storage/async-storage'
import {StorageKey} from '../constants/AsyncStorageService'
import AboutUsScreen from '../screens/HomeContainer/aboutUsScreen/AboutUsScreen'
import DonateScreen from '../screens/HomeContainer/donateScreen/DonateScreen'
import ShopStoreScreen from '../screens/HomeContainer/shopStoreScreen/ShopStoreScreen'
import MembershipScreen from '../screens/HomeContainer/membershipScreen/MembershipScreen'
    const RootNavigator = createStackNavigator()
    const theme = useTheme()
    
    const LoginProcessNavigator = createStackNavigator()
    const LoginProcessScreenNaviagtor = () => {
      return (
        <LoginProcessNavigator.Navigator>
          <LoginProcessNavigator.Screen
            name={RouteKeys.LOGIN}
            component={LoginScreen}
            options={{headerShown: false}}
          />
        </LoginProcessNavigator.Navigator>
      )
    }
    
    const HomeNavigator = createStackNavigator()
    const HomeScreenNaviagtor = () => {
      return (`enter code here`
        <HomeNavigator.Navigator>
          <HomeNavigator.Screen
            name={RouteKeys.HOME_SCREEN}
            component={HomeScreen}
            options={{headerShown: false}}
          />
        </HomeNavigator.Navigator>
      )
    }
    
    const AboutUsNavigator = createStackNavigator()
    const AboutUsScreenNaviagtor = () => {
      return (
        <AboutUsNavigator.Navigator>
          <AboutUsNavigator.Screen
            name={RouteKeys.ABOUT_US_SCREEN}
            component={AboutUsScreen}
            options={{headerShown: false}}
          />
        </AboutUsNavigator.Navigator>
      )
    }
    const DonateNavigator = createStackNavigator()
    const DonateScreenNaviagtor = () => {
      return (
        <DonateNavigator.Navigator>
          <DonateNavigator.Screen
            name={RouteKeys.DONATE_SCREEN}
            component={DonateScreen}
            options={{headerShown: false}}
          />
        </DonateNavigator.Navigator>
      )
    }
    const MembershipNavigator = createStackNavigator()
    const MembershipScreenNaviagtor = () => {
      return (
        <MembershipNavigator.Navigator>
          <MembershipNavigator.Screen
            name={RouteKeys.MEMBERSHIP_SCREEN}
            component={MembershipScreen}
            options={{headerShown: false}}
          />
        </MembershipNavigator.Navigator>
      )
    }
    const ShopStoreNavigator = createStackNavigator()
    const ShopStoreScreenNaviagtor = () => {
      return (
        <ShopStoreNavigator.Navigator>
          <ShopStoreNavigator.Screen
            name={RouteKeys.SHOP_STORE_SCREEN}
            component={ShopStoreScreen}
            options={{headerShown: false}}
          />
        </ShopStoreNavigator.Navigator>
      )
    }
    const NotificationNavigator = createStackNavigator()
    const NotificationScreenNaviagtor = () => {
      return (
        <NotificationNavigator.Navigator>
          <NotificationNavigator.Screen
            name={RouteKeys.NOTIFICATIONS_SCREEN}
            component={NotificationsScreen}
            options={{headerShown: false}}
          />
        </NotificationNavigator.Navigator>
      )
    }
    const EdpisodeDetailNavigator = createStackNavigator()
    const EdpisodeDetailScreenNaviagtor = () => {
      return (
        <EdpisodeDetailNavigator.Navigator>
          <EdpisodeDetailNavigator.Screen
            name={RouteKeys.EPISODE_DETAIL_SCREEN}
            component={EdpisodeDetailScreen}
            options={{headerShown: false}}
          />
        </EdpisodeDetailNavigator.Navigator>
      )
    }
    const SearchNavigator = createStackNavigator()
    const SearchScreenNaviagtor = () => {
      return (
        <SearchNavigator.Navigator>
          <SearchNavigator.Screen
            name={RouteKeys.SEARCH_SCREEN}
            component={SearchScreen}
            options={{headerShown: false}}
          />
          <SearchNavigator.Screen
            name={RouteKeys.LOCATION_CONTAINER}
            component={LocationConatainer}
            options={{headerShown: false}}
          />
        </SearchNavigator.Navigator>
      )
    }
    const MapNavigator = createStackNavigator()
    const MapScreenNaviagtor = () => {
      return (
        <MapNavigator.Navigator>
          <MapNavigator.Screen
            name={RouteKeys.MAP_SCREEN}
            component={MapScreen}
            options={{headerShown: false}}
          />
        </MapNavigator.Navigator>
      )
    }
    const ListViewNavigator = createStackNavigator()
    const ListViewScreenNaviagtor = () => {
      return (
        <ListViewNavigator.Navigator>
          <ListViewNavigator.Screen
            name={RouteKeys.LIST_VIEW_SCREEN}
            component={ListViewScreen}
            options={{headerShown: false}}
          />
        </ListViewNavigator.Navigator>
      )
    }
    const ProfileNavigator = createStackNavigator()
    const ProfileScreenNaviagtor = () => {
      return (
        <ProfileNavigator.Navigator>
          <ProfileNavigator.Screen
            name={RouteKeys.MY_PROFILE}
            component={MyProfileScreen}
            options={{headerShown: false}}
          />
        </ProfileNavigator.Navigator>
      )
    }
    const HelpAndSupportNavigator = createStackNavigator()
    const HelpAndSupportScreenNaviagtor = () => {
      return (
        <HelpAndSupportNavigator.Navigator>
          <HelpAndSupportNavigator.Screen
            name={RouteKeys.HELP_AND_SUPPORT_SCREEN}
            component={HelpAndSupportScreen}
            options={{headerShown: false}}
          />
        </HelpAndSupportNavigator.Navigator>
      )
    }
    const LocationDetailNavigator = createStackNavigator()
    const LocationDetailScreenNaviagtor = () => {
      return (
        <LocationDetailNavigator.Navigator>
          <LocationDetailNavigator.Screen
            name={RouteKeys.LOCATION_DETAILS_SCREEN}
            component={LocationDetailScreen}
            options={{headerShown: false}}
          />
        </LocationDetailNavigator.Navigator>
      )
    }
    
    //TAB NAVIGATOR BottOM TAB MANUFECTURER
    const Tab = createBottomTabNavigator()
    const TabScreenNavigator = () => {
      return (
        <Tab.Navigator
          initialRouteName={RouteKeys.HOME_SCREEN}
          tabBarOptions={{
            activeTintColor: Colors.HERITAGE_COLOR,inactiveTintColor: Colors.WHITE,labelStyle: {
              fontSize: 15,},style: {
              backgroundColor: theme === 'dark' ? Colors.RED_MAROON : Colors.BLACK,height: Scaling.HEIGHT_SCALE_60,borderTopLefTradius: Scaling.HEIGHT_SCALE_10,borderTopRighTradius: Scaling.HEIGHT_SCALE_10,marginTop: -Scaling.HEIGHT_SCALE_20,borderTopColor: Colors.BLACK,}}>
          <Tab.Screen
            //key={RouteKeys.HOME_SCREEN}
            name={RouteKeys.HOME_SCREEN}
            // key={RouteKeys.HOME_SCREEN}
            options={{
              tabBarIcon: ({color}) => (
                <Image
                  source={Images.homeIcon}
                  style={{
                    height:
                      color === Colors.HERITAGE_COLOR
                        ? Scaling.HEIGHT_SCALE_28
                        : Scaling.HEIGHT_SCALE_20,width:
                      color === Colors.HERITAGE_COLOR
                        ? Scaling.HEIGHT_SCALE_28
                        : Scaling.HEIGHT_SCALE_20,resizeMode: 'contain',tintColor: color,}}
                />
              ),tabBarLabel: () => {
                ;<Text></Text>
              },}}
            component={HomeScreenNaviagtor}
          />
          <Tab.Screen
            name={RouteKeys.SEARCH_SCREEN}
            //key={RouteKeys.SEARCH_SCREEN}
            options={{
              tabBarIcon: ({color}) => (
                <Image
                  source={Images.searchIcon}
                  style={{
                    height:
                      color === Colors.HERITAGE_COLOR
                        ? Scaling.HEIGHT_SCALE_25
                        : Scaling.HEIGHT_SCALE_20,width:
                      color === Colors.HERITAGE_COLOR
                        ? Scaling.HEIGHT_SCALE_25
                        : Scaling.HEIGHT_SCALE_20,}}
            component={SearchScreenNaviagtor}
          />
    
          <Tab.Screen
            name={RouteKeys.HELP_AND_SUPPORT_SCREEN}
            options={{
              tabBarIcon: ({color}) => (
                <Image
                  source={Images.messageIcon}
                  style={{
                    height:
                      color === Colors.HERITAGE_COLOR
                        ? Scaling.HEIGHT_SCALE_28
                        : Scaling.HEIGHT_SCALE_20,}}
            component={HelpAndSupportScreenNaviagtor}
          />
          <Tab.Screen
            name={RouteKeys.SETTINGS_SCREEN}
            // key={RouteKeys.SETTINGS_SCREEN}
            options={{
              tabBarIcon: ({color}) => (
                <Image
                  source={Images.settingIcon}
                  style={{
                    height:
                      color === Colors.HERITAGE_COLOR
                        ? Scaling.HEIGHT_SCALE_28
                        : Scaling.HEIGHT_SCALE_20,}}
            component={SettingsScreen}
          />
          <Tab.Screen
            name={RouteKeys.MY_PROFILE}
            // key={RouteKeys.MY_PROFILE}
            options={{
              tabBarIcon: ({color}) => (
                <Image
                  source={Images.profileIcon}
                  style={{
                    height:
                      color === Colors.HERITAGE_COLOR
                        ? Scaling.HEIGHT_SCALE_28
                        : Scaling.HEIGHT_SCALE_20,}}
            component={ProfileScreenNaviagtor}
          />
        </Tab.Navigator>
      )
    }
    
    export const Router = () => {
      const linking = {
        prefixes: ['https://play.google.com/store/apps','bhpsApp://'],config: {
          SPLASH: 'splash',TAB_SCREEN: {
            path: 'tabscreen',screens: {
              HOME_SCREEN: {
                path: 'home',SEARCH_SCREEN: {
                path: 'search',HELP_AND_SUPPORT_SCREEN: {
                path: 'support',EPISODE_DETAILS: 'episode',EPISODE_DETAIL_SCREEN: {
            path: 'episodedetails/:episodeId',params: {
              episodeId: null,}
      return (
        <NavigationContainer
          linking={linking}
          fallback={<Text>Loading...</Text>}>
          <RootNavigator.Navigator initialRouteName={RouteKeys.SPLASH}>
            <RootNavigator.Screen
              name={RouteKeys.SPLASH}
              component={SplashScreen}
              options={{headerShown: false}}
            />
            <RootNavigator.Screen
              name={RouteKeys.LOGIN}
              component={LoginProcessScreenNaviagtor}
              options={{headerShown: false}}
            />
            <RootNavigator.Screen
              name={RouteKeys.TAB_SCREEN}
              component={TabScreenNavigator}
              options={{headerShown: false}}
            />
            <RootNavigator.Screen
              name={RouteKeys.NOTIFICATIONS_SCREEN}
              component={NotificationScreenNaviagtor}
              options={{headerShown: false}}
            />
            <RootNavigator.Screen
              name={RouteKeys.EPISODE_DETAILS}
              component={EdpisodeDetailScreenNaviagtor}
              options={{headerShown: false}}
            />
            <RootNavigator.Screen
              name={RouteKeys.MAP_SCREEN}
              component={MapScreenNaviagtor}
              options={{headerShown: false}}
            />
            <RootNavigator.Screen
              name={RouteKeys.LIST_VIEW_SCREEN}
              component={ListViewScreenNaviagtor}
              options={{headerShown: false}}
            />
            <RootNavigator.Screen
              name={RouteKeys.LOCATION_DETAILS_SCREEN}
              component={LocationDetailScreenNaviagtor}
              options={{headerShown: false}}
            />
            <RootNavigator.Screen
              name={RouteKeys.ABOUT_US_SCREEN}
              component={AboutUsScreenNaviagtor}
              options={{headerShown: false}}
            />
            <RootNavigator.Screen
              name={RouteKeys.DONATE_SCREEN}
              component={DonateScreenNaviagtor}
              options={{headerShown: false}}
            />
            <RootNavigator.Screen
              name={RouteKeys.SHOP_STORE_SCREEN}
              component={ShopStoreScreenNaviagtor}
              options={{headerShown: false}}
            />
            <RootNavigator.Screen
              name={RouteKeys.MEMBERSHIP_SCREEN}
              component={MembershipScreenNaviagtor}
              options={{headerShown: false}}
            />
          </RootNavigator.Navigator>
        </NavigationContainer>
      )
    }

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)