问题描述
我有嵌套的堆栈导航器,首先是启动和登录堆栈导航器,然后是底部选项卡导航器,其中我有五个堆栈导航器,如主页堆栈、搜索堆栈、帮助支持、设置堆栈和配置文件堆栈导航器以及详细信息导航器但剧集详细信息导航器在(主堆栈导航器和选项卡导航器)之外。我如何为此创建配置路径,通常我只是从家庭导航器中导航.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 (将#修改为@)