react-native - 当嵌套导航器在 android 和 ios 中反应原生时，反应导航 5 深层链接不起作用
问题描述
我有嵌套的堆栈导航器，首先是启动和登录堆栈导航器，然后是底部选项卡导航器，其中我有五个堆栈导航器，如主堆栈、搜索堆栈、帮助支持、设置堆栈和配置文件堆栈导航器，以及详细信息导航器，但情节详细信息导航器在（主堆栈导航器和选项卡导航器）之外。我如何为此创建配置路径，通常我只是从主页导航器导航.navigate（详细信息）。我的配置深层链接在应用程序打开时工作，但当应用程序关闭时打开页面但不返回。
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,
resizeMode: 'contain',
tintColor: color,
}}
/>
),
tabBarLabel: () => {
;<Text></Text>
},
}}
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,
width:
color === Colors.HERITAGE_COLOR
? Scaling.HEIGHT_SCALE_28
: Scaling.HEIGHT_SCALE_20,
resizeMode: 'contain',
tintColor: color,
}}
/>
),
tabBarLabel: () => {
;<Text></Text>
},
}}
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,
width:
color === Colors.HERITAGE_COLOR
? Scaling.HEIGHT_SCALE_28
: Scaling.HEIGHT_SCALE_20,
resizeMode: 'contain',
tintColor: color,
}}
/>
),
tabBarLabel: () => {
;<Text></Text>
},
}}
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,
width:
color === Colors.HERITAGE_COLOR
? Scaling.HEIGHT_SCALE_28
: Scaling.HEIGHT_SCALE_20,
resizeMode: 'contain',
tintColor: color,
}}
/>
),
tabBarLabel: () => {
;<Text></Text>
},
}}
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>
)
}
解决方案
推荐阅读
- karate - karate - 无法从 0.7.0 版开始执行证书选择
- java - java中的所有软引用会一次性清除吗？
- c# - 当授权属性允许列出时，角色返回未授权
- c# - Get CheckedListBox item ValueMember
- python - unable to close aiohttp connection/API. (newbie)
- laravel - Laravel spatie/laravel-permissions Naming Conventions
- excel - 以管理员身份在宏中运行 Powershell 命令（提升）
- java - 尝试使用 java spring boot、hibernate 和 thmyeleaf 来支持 MAMP，但在验证时遇到错误
- google-chrome - 为了同步，如何将本地 Tampermonkey 脚本转换为基于 Web 的脚本？
- javascript - What is wrong with this nested if else program. Print wrong answer whenever the 1st no is greater?.