React Native 导航问题 - 正确的“导航”不存在

Question

我尝试了很长时间在react-native中进行简单的导航页面练习，但程序仍然显示“正确的‘导航’不存在”，所有导航组件都已安装并且pod已经再次安装，请帮忙。 ......非常感谢你。

希望大家能帮忙解决问题，不胜感激！

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 {

  function HomeScreen() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screenxxx</Text>
      </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}>
        <View
          style={{
            backgroundColor: isDarkMode ? Colors.black : Colors.white,
          }}>


    <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>
    <Button
    title="Go to Details... again"
    onPress={() => navigation.push('Details')}
    />
    
    </View>
    </ScrollView>
  );
}

export default App;

Answer 1

看起来导航没有在您的 App 组件中声明，因此当 Button 尝试访问导航时，它是未定义的。

您可以将 Button 组件移动到 NavigationContainer 内，以便它可以访问导航，或者如果 App 包装在导航组件内，则从 App 的 props 中获取导航功能。