Getting a TypeError: undefined is not an object for navigation.nagivate

Question

我正在开发一个应用程序，我想导航到不同的屏幕。我正在使用 React Navigation 这样做，但是当我尝试使用 navigation.navigate 时出现错误 TypeError: undefined is not an object (evaluating 'navigation.navigate')。

我所有的屏幕都在一个屏幕文件夹中，这里是文件分支的样子。

File branch

这是我在 App.js 中制作导航容器和堆栈导航器的代码。

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Home from './Screens/Home';
import NewDaignosis from './Screens/NewDaignosis';
import DaignosisList from './Screens/DaignosisList';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>

      <Stack.Navigator initalRouteName="Home">

        <Stack.Screen name="Home" component={Home}/>
        <Stack.Screen name="New Daignosis" component={NewDaignosis}/>
        <Stack.Screen name="Daignosis List" component={DaignosisList}/>


      </Stack.Navigator>

    </NavigationContainer>
  );
}

这里是 Home.js 我用 navigation.navigate

import React from 'react';
import { Text, View } from 'react-native';
import GeneralButton from '../Buttons/GeneralButton';
import styles from '../Styles/GeneralStyles';

const Home = (props, { navigation }) => {
  return (
    <View style={styles.genFirstView}>
      <View style={styles.genInFirstView}>

          <Text style={{
            top: 25,
            fontSize: 50,
            fontWeight: 'bold',
            color: "black",
            flex: 2,
          }}> ACHD </Text>

          <View style={{flex: 2}}>
            <GeneralButton
              name="Start New Daignosis"
              onPress={() => navigation.navigate('New Daignosis')}
            />
          </View>

          <View style={{flex: 9}}>
            <GeneralButton
              name="Choose from Daignosis list"
              onPress={() => navigation.navigate('Daignosis List')}
            />

          </View>

      </View>
      <View style={{right: 10}}>
        <GeneralButton
          name="Help"/>
      </View>
    </View>

  );
}

export default Home;

GeneralButton 只是我创建的可以重复使用的通用可触摸不透明元素。

我正在移动的屏幕也只是空页面 atm。

如果需要任何说明，请告诉我。

谢谢！

Answer 1

您的代码有误。

const Home = (props, { navigation })

导航属于道具，需要这样写

const Home = ({ navigation, ...props })

Getting a TypeError: undefined is not an object for navigation.nagivate

Getting a TypeError: undefined is not an object for navigation.nagivate

javascript

reactjs

react-native

react-navigation

react-navigation-stack