React Native Navigation报错：'navigation'不存在问题求助

错误原因分析 #

核心问题是App组件里的<Button>不在导航栈的屏幕组件范围内——只有被Stack.Screen渲染的组件（比如HomeScreen、DetailsScreen）才会自动获得navigation属性，直接在App根组件里使用navigation自然会报错。另外代码还有几处小问题需要修复：

• SafeAreaView导入语句后缺少逗号，导致语法错误
• isDarkMode未通过useColorScheme()获取
• backgroundStyle样式未定义

修复步骤 #

1. 将外部Button移到HomeScreen内部：只有导航栈内的组件能访问navigation对象
2. 补全导入语句的逗号：修正SafeAreaView后的语法错误
3. 获取颜色模式并定义样式：调用useColorScheme()拿到isDarkMode，添加backgroundStyle定义

修改后的完整代码 #

import React from 'react';
import type {PropsWithChildren} from 'react';
import Main from './basic/main';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

import {
    SafeAreaView, // 补全逗号
    ScrollView,
    StyleSheet,
    Text, 
    useColorScheme,
    View,
    Button,
  } from 'react-native';

import {
    Colors,
    DebugInstructions,
    Header,
    ReloadInstructions,
  } from 'react-native/Libraries/NewAppScreen';

type SectionProps = PropsWithChildren<{
    title: string;
  }>;

const Stack = createNativeStackNavigator();

function App(): React.JSX.Element {
  // 获取颜色模式
  const isDarkMode = useColorScheme() === 'dark';
  
  // 定义backgroundStyle样式
  const backgroundStyle = StyleSheet.create({
    scrollView: {
      backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
    },
  });

  function HomeScreen({ navigation }) { // 接收navigation属性
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screenxxx</Text>
        {/* 把Button移到这里 */}
        <Button
          title="Go to Details"
          onPress={() => navigation.push('Details')}
        />
      </View>
    );
  }

  function DetailsScreen({ navigation }) {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
        <Button
          title="Go to Details... again"
          onPress={() => navigation.navigate('Details')}
        />
      </View>
    );
  }


  return (
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle.scrollView}>
        <View
          style={{
            backgroundColor: isDarkMode ? Colors.black : Colors.white,
            flex: 1
          }}>
          <NavigationContainer>
            <Stack.Navigator initialRouteName="Home">
              <Stack.Screen name="Home" component={HomeScreen} options={{ title: 'Overview' }}/>
              <Stack.Screen name="Details" component={DetailsScreen} options={{ title: 'Overview' }}/>
            </Stack.Navigator>
          </NavigationContainer>
        </View>
      </ScrollView>
  );
}

export default App;

关键说明 #

• 只有被Stack.Screen注册的组件（如HomeScreen）会由React Navigation自动注入navigation属性，所以导航相关操作必须放在这些组件内部。
• 如果确实需要在导航容器外部使用导航功能，可以使用useNavigation钩子，但前提是该组件必须包裹在NavigationContainer内部，不过这种场景很少见，推荐优先用屏幕组件内部的navigation prop。

内容的提问来源于stack exchange，提问作者Howard Lam