我在使用 nested stacks - nested navigators.
来回导航时遇到问题我已经阅读了几个解决方案，“修补”这个问题的方法，但都没有用。 如果我在我的 Tab.Navigator 内的其他堆栈中，并且我在该堆栈（示例 AssetStacks）中导航，我可以使用标题按钮（设置为 tabBottomHome）返回该堆栈，并使用函数
navigation.pop ()The action 'POP' with payload {"count":1} was not handled by any browser.
Is there any screen to go back to?
所以这个带有
navigation.goBack()The action 'GO_BACK' was not handled by any navigator.
Is there any screen to go back to?
导航的navigation结构是这样的-->
RootStack(Stack--> Index.tsx)
|--Login Screen(not logged)
|--ErrorLogin Screen(not logged)
|--TabsBottomHome(logged)
| |--ConversationsStack
| |--TaskStack
| |--Home
| |--AssetsStack
| |--AssetScreen1
| |--AssetScreen2
|
| |--ConnectGatewayStack
| |--GatewayScreen 1
| |--GatewayScreen 2
| |--GatewayScreen 3
| |--GatewayScreen 4
| |--GatewayScreen 5
|
|--
首先，我在 Index.tsx 中有我的第一个堆栈，它处理登录或登录中的错误以及以下身份验证 -->
import React, { useEffect, useContext } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import {
createStackNavigator,
} from '@react-navigation/stack';
import { Alert, Platform, Pressable } from 'react-native';
import LoginScreen from '@screens/login/LoginScreen';
import LoginError from '@screens/login/LoginError';
import { AppContext, Types } from '@contexts/appContext';
import TabsBottomHome from '@navigation/tabsBottomNavigation/tabsBottomHome';
import { firebase } from '@react-native-firebase/messaging';
import Header from '@components/header/Header';
import HeaderBackground from '@components/header/HeaderBackground';
import ArrowLeft from '@assets/images/arrow_left.svg';
import HeaderRight from '@components/header/HeaderRight';
export type RootStackParamList = {
tabsBottomHome: undefined;
Login: undefined;
LoginError: undefined;
};
const Stack = createStackNavigator<RootStackParamList>();
const Index = () => {
const { state, dispatch } = useContext(AppContext);
console.log("🚀 ~ file: Index.tsx:67 ~ Index ~ state", state);
return (
<>
<NavigationContainer>
<Stack.Navigator initialRouteName='tabsBottomHome'
screenOptions={{
headerTitle: () => <Header />,
headerBackground: () => <HeaderBackground />,
headerLeft: ({ onPress, canGoBack }) =>
canGoBack ? (
<Pressable onPress={onPress} style={{ width: 30, height: 15 }}>
<ArrowLeft height={15} width={15} style={{ marginLeft: 15 }} />
</Pressable>
) : (
<Pressable style={{ width: 65, height: 35 }}></Pressable>
),
headerRight: () => <HeaderRight />,
}}
>
{state.isSignIn ? (
<>
<Stack.Screen
name='tabsBottomHome'
component={TabsBottomHome}
options={{headerShown: false }}
/>
</>
) : (
<>
<Stack.Screen
name="Login"
component={LoginScreen}
options={{ headerShown: false }}
/>
<Stack.Screen
name="LoginError"
component={LoginError}
/>
</>
)}
</Stack.Navigator>
</NavigationContainer>
</>
);
};
export default Index;
注意：索引中的header仅在LoginError中显示。
我的标签底部导航 -->
import React, { useState } from 'react';
import { Image, Pressable, StyleSheet, View } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { useNavigation } from '@react-navigation/core';
import Header from '@components/header/Header';
import HeaderRight from '@components/header/HeaderRight';
import HeaderBackground from '@components/header/HeaderBackground';
import HomeScreen from '@screens/home/HomeScreen';
import ConversationScreen from '@screens/conversations/ConversationScreen';
import TaskScreen from '@screens/task/TaskScreen';
import Profile from '@screens/profile/Profile';
import NotificationScreen from '@screens/notifications/NotificationScreen';
import { ConnectGatewayStack } from '../stacks/ConnectGatewayStack';
import { AssetsStack } from '../stacks/AssetsStack';
import { StackActions } from '@react-navigation/native';
export type RootTabParamListBottom = {
Home: undefined;
Assets: {} | undefined;
Tasks: undefined;
Conversations:undefined;
Profile: undefined;
Notifications: undefined;
GatewayStack : undefined;
};
const Tab = createBottomTabNavigator<RootTabParamListBottom>();
const TabsBottomHome = ({navigation}:any) => {
const [routeName, setRouteName] = useState<string>("");
const navigateBack = ()=>{
navigation.pop();
}
return (
<>
<Tab.Navigator
initialRouteName='Home'
screenOptions={{
headerShown:true,
tabBarShowLabel:false,
tabBarStyle:style.tabsBottomContainer,
tabBarHideOnKeyboard: true,
unmountOnBlur: true,
headerTitle: () => <Header />,
headerBackground: () => <HeaderBackground />,
headerLeft: () =>
routeName != "Home" ? (
<Pressable onPress={navigateBack} style={{ width: 65, height: 15 }}>
<ArrowLeft height={15} width={15} style={{ marginLeft: 15 }} />
</Pressable>
)
: (
<Pressable style={{ width: 65, height: 35 }}></Pressable>
)
,
headerRight: () => <HeaderRight />,
}}
sceneContainerStyle={style.backgroundContent}
screenListeners={({route})=>({
state: ()=> {
setRouteName(route.name);
}
})}
backBehavior={'history'}
>
<Tab.Screen
name='Assets'
component={ AssetsStack }
options={{tabBarIcon:({focused,color})=>(
<View>
<Image
source={iconAsset}
style={{
tintColor: focused ? '#00B2DF' : '',
marginTop: 8
}}
/>
</View>
)}} />
<Tab.Screen
name='GatewayStack'
component={ConnectGatewayStack}
options={{tabBarIcon:({focused,color})=>(
<View>
<Image
source={iconBluetooth}
style={{
tintColor: focused ? '#00B2DF' : ''
}}
/>
</View>
)}} />
<Tab.Screen
name='Home'
component={HomeScreen}
options={{tabBarIcon:({focused,color})=>(
<View>
<Image
source={iconHome}
style={{
tintColor: focused ? '#00B2DF' : ''
}}
/>
</View>
)
}} />
<Tab.Screen
name='Tasks'
component={TaskScreen}
options={{tabBarIcon:({focused,color})=>(
<View>
<Image
source={iconTask}
style={{
tintColor: focused ? '#00B2DF' : ''
}}
/>
</View>
)}} />
<Tab.Screen
name='Conversations'
component={ConversationScreen}
options={{tabBarIcon:({focused,color})=>(
<View>
<Image
source={iconChat}
style={{
tintColor: focused ? '#00B2DF' : ''
}}
/>
</View>
)}} />
<Tab.Screen
name='Profile'
component={Profile}
options={{
tabBarButton: () => null,
}} />
<Tab.Screen
name='Notifications'
component={NotificationScreen}
options={{
tabBarButton: () => null,
}} />
</Tab.Navigator>
</>
);
}
export default TabsBottomHome;
AssetStack
import React from 'react';
import {createStackNavigator} from '@react-navigation/stack';
import {ListAssetsScreen} from '@screens/assets/ListAssetsScreen';
import {DetailAssetScreen} from '@screens/assets/DetailAssetScreen';
import {AssetProvider} from '@contexts/assetContext';
import {ThemeProvider} from './../../theme/themeContext';
export type StackAssetsList = {
ListAssets: {} | undefined;
DetailAsset: {} | undefined;
};
const Stack = createStackNavigator<StackAssetsList>();
const AssetsStack = () => {
return (
<ThemeProvider>
<AssetProvider>
<Stack.Navigator
initialRouteName="ListAssets"
screenOptions={{headerShown: false}}>
<Stack.Screen name="ListAssets" component={ListAssetsScreen} />
<Stack.Screen name="DetailAsset" component={DetailAssetScreen} />
</Stack.Navigator>
</AssetProvider>
</ThemeProvider>
);
};
export {AssetsStack};
"@react-navigation/bottom-tabs": "^6.5.4",
"@react-navigation/native": "^6.1.3",
"@react-navigation/stack": "^6.3.12",
有什么想法吗？导航做得好吗？
注意：如果你没注意到，我是小学生。
非常感谢您的关注和时间。