React Native：undefined 不是对象（评估“props.navigation.navigate”）

Question

我正在学习 React Native 并尝试使用 Expo 运行此代码，它给了我异常错误：未定义不是对象（评估“props.navigation.navigate”），在 App.js 的第 17 行（在注释中标记） )

有两个文件：App.js 和 Untitled1.js

应用程序：

import { StyleSheet, Text, View, TextInput, TouchableOpacity } from 'react-native';
import 'react-native-gesture-handler';
import { NavigationContainer } from '@react-navigation/native';

  function App(props) {
    return (

      <View style={styles.container}>
        <Text style={styles.logo}>APPetito</Text>

        <Text style={styles.loginText}>Welcome to our app!</Text>
        <Text style={styles.loginText}>Choose what do you want to do</Text>

// [ THE FOLLOWING LINE CONTAINS THE ERROR ]
        <TouchableOpacity onPress={() => props.navigation.navigate("Untitled1")} style={styles.loginBtn}>

          <Text style={styles.loginText}>I eat food</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.loginBtn}>
          <Text style={styles.loginText}>I sell food</Text>
        </TouchableOpacity>

      </View>
    );

  }
// here there are the const styles
export default App;

无题.js

import * as React from 'react';
import React, { Component } from "react";
import { StyleSheet, View, Text } from "react-native";
import Icon from "react-native-vector-icons/Entypo";
import { NavigationContainer } from '@react-navigation/native';

function Untitled1(props) {
  return (
    <View style={styles.container}>
      <Icon name="check" style={styles.icon}></Icon>
      <Text style={styles.itWorks}>It works!</Text>
    </View>
  );
}

// here there are the const styles
export default Untitled1;

我能做些什么来解决问题？

Answer 1

我认为问题在于您没有首先创建堆栈导航器来在屏幕之间导航。 请参阅反应导航文档以在此处了解更多信息

根据文档，您必须实现堆栈导航器，例如：

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

  function Home(props) {
    return (

      <View style={styles.container}>
        <Text style={styles.logo}>APPetito</Text>

        <Text style={styles.loginText}>Welcome to our app!</Text>
        <Text style={styles.loginText}>Choose what do you want to do</Text>

        <TouchableOpacity onPress={() => props.navigation.navigate("Untitled1")} style={styles.loginBtn}>

          <Text style={styles.loginText}>I eat food</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.loginBtn}>
          <Text style={styles.loginText}>I sell food</Text>
        </TouchableOpacity>

      </View>
    );

  }


const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="Untitled1" component={Untitled1} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

我已经稍微更新了您的代码以帮助您理解这个概念。