React Native导航报错：NAVIGATE动作未被任何导航器处理

我刚开始用React开发移动端应用，现在在导航标签页功能上卡壳了。底部栏有3个按钮，从首页跳转到SettingsScreen时，弹出错误：

ERROR The action 'NAVIGATE' with payload {"name":"SettingsScreen"} was not handled by any navigator

相关代码 #

TabNavigator.tsx #

// TabNavigator.tsx
import React from 'react';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import HomeScreen from '../app/Screens/HomeScreen';
import SettingsScreen from '../app/Screens/SettingsScreen';
import LogOutScreen from '../app/Screens/LogoutScreen';

const Tab = createMaterialTopTabNavigator();

const TabNavigator: React.FC = () => (
  <Tab.Navigator
    screenOptions={{
      tabBarStyle: { backgroundColor: 'black' },
      tabBarLabelStyle: { color: 'white' },
    }}
  >
    <Tab.Screen name="HomeScreen" component={HomeScreen} />
    <Tab.Screen name="SettingsScreen" component={SettingsScreen} />
    <Tab.Screen name="LogOutScreen" component={LogOutScreen} />
  </Tab.Navigator>
);

export default TabNavigator;

App.tsx #

// App.tsx
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import AppBar from './AppBar';
import TabNavigator from './components/TabNavigator';

const App: React.FC = () => {
  return (
    <NavigationContainer>
      <TabNavigator />
    </NavigationContainer>
  );
};

export default App;

AppBar.tsx #

// AppBar.tsx
import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { StackNavigationProp } from '@react-navigation/stack';
import { RootStackParamList } from './assets/types';
import { FontAwesome } from '@expo/vector-icons';

type NavigationProp = StackNavigationProp<RootStackParamList>;

const AppBar: React.FC = () => {
  const navigation = useNavigation<NavigationProp>();
  return (
    <View style={styles.appBar}>
      <View style={styles.buttonContainer}>
        <TouchableOpacity style={styles.button}>
          <FontAwesome name="home" size={20} color="white" />
          <Text style={styles.buttonText}>Home</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.button} onPress={() => navigation.navigate('SettingsScreen')}>
          <FontAwesome name="cog" size={20} color="white" />
          <Text style={styles.buttonText}>Settings</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.button}>
          <FontAwesome name="sign-out" size={20} color="white" />
          <Text style={styles.buttonText}>Logout</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  appBar: {
    backgroundColor: 'black',
    padding: 10,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  buttonContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    flex: 1,
  },
  button: {
    flexDirection: 'row',
    alignItems: 'center',
    marginHorizontal: 10,
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
    marginLeft: 5,
  },
});

export default AppBar;

SettingsScreen.tsx #

import React from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';
import AppBar from '../../AppBar'; 

const SettingsScreen: React.FC<any> = ({ route }) => {
  return (
  <View style={styles.container}>
      <View style={styles.content}>
        <Text style={styles.welcomeText}>This is the Settings Screen</Text>
      </View>
    <AppBar/>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  content: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  welcomeText: {
    fontSize: 24,
    fontWeight: 'bold',
  },
});

export default SettingsScreen;

截图 #

问题原因&修复方案 #

核心问题 #

1. 导航类型不匹配：你用StackNavigationProp定义导航类型，但实际项目只有Tab导航器，没有Stack导航器，导致导航上下文识别错误。
2. 重复导航栏：每个屏幕里单独引入AppBar，而Tab导航器本身已经自带标签栏，双重导航栏导致上下文混乱。

修复步骤 #

1. 修正AppBar的导航类型

把Stack导航类型换成Tab导航的类型，以你用的material-top-tabs为例：

// AppBar.tsx
import { MaterialTopTabNavigationProp } from '@react-navigation/material-top-tabs';

// 定义Tab页面的参数列表
type TabParamList = {
  HomeScreen: undefined;
  SettingsScreen: undefined;
  LogOutScreen: undefined;
};

type NavigationProp = MaterialTopTabNavigationProp<TabParamList>;

2. 移除屏幕内的重复AppBar

Tab导航器已经自带顶部标签栏，不需要在每个Screen里单独添加。修改SettingsScreen：

// SettingsScreen.tsx
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const SettingsScreen: React.FC<any> = ({ route }) => {
  return (
    <View style={styles.container}>
      <View style={styles.content}>
        <Text style={styles.welcomeText}>This is the Settings Screen</Text>
      </View>
    </View>
  );
};

// 样式保留不变
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  content: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  welcomeText: {
    fontSize: 24,
    fontWeight: 'bold',
  },
});

export default SettingsScreen;

3. （可选）改成底部标签栏

如果想要底部导航栏，把TabNavigator里的createMaterialTopTabNavigator换成createBottomTabNavigator：

// TabNavigator.tsx
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

4. 确保导航上下文正确

App.tsx的结构没问题，NavigationContainer包裹TabNavigator，确保所有子组件能获取正确的导航上下文。

内容的提问来源于stack exchange，提问作者Alexandru M