React Native导航报错求助：ReferenceError及TypeError问题

让我们一步步拆解你的问题，找到并修复这些错误：

错误原因分析 #

1. 第一个错误TypeError: this.props.navigation is not a function：
   你调用this.props.navigation("FoodScreen")是错误的——navigation是一个对象，不是方法，真正用来跳转的是它的navigate方法，应该写成this.props.navigation.navigate("FoodScreen")。

2. 第二个错误ReferenceError: can't find variable: navigate：
   在PromoFoodItem组件里，你直接用navigate但没有定义它。这个组件本身不是导航栈的直接屏幕组件，所以需要从父组件传递过来的navigation props里获取navigate方法。

3. 额外问题：你的App.js里只给第一个PromoFoodItem传递了navigation props，后面两个PromoFoodItem没有传，这会导致后面的组件点击时同样报错。

修复步骤 #

1. 修复App.js中PromoFoodItem的navigation传递 #

给所有PromoFoodItem都加上navigation={this.props.navigation}，确保每个组件都能拿到导航对象：

import React,{Component} from 'react';
import {Text,View,ScrollView} from 'react-native';
import { Container,Header,Left,Right,Body } from 'native-base';
import HeaderWnd from './HeaderWnd';
import PromoFoodItem from './PromoFoodItem';
let burgerImage = require('./Images/burger.jpg');
let chickenImage = require('./Images/chicken.jpg');
let pizzaImage = require('./Images/pizza.jpg');
export default class App extends Component {
  render() {
    return(
      <View>
        <HeaderWnd/>
        <ScrollView>
          <PromoFoodItem navigation={this.props.navigation} image={burgerImage} text={'BURGER'}/>
          {/* 给下面两个组件也加上navigation props */}
          <PromoFoodItem navigation={this.props.navigation} image={chickenImage} text={'CHICKEN'}/>
          <PromoFoodItem navigation={this.props.navigation} image={pizzaImage} text={'PIZZA'}/>
        </ScrollView>
      </View>
    );
  }
}

2. 修复PromoFoodItem.js中的跳转调用 #

在组件里通过this.props.navigation调用navigate方法，或者先解构出来使用：

import React,{Component} from 'react';
import {Text,View,Image,TouchableOpacity} from 'react-native';
import { Container,Header,Left,Right,Body } from 'native-base';
import styles from './PromoFoodItemStyle';
import FoodScreen from './FoodSceen';
export default class PromoFoodItem extends Component {
  render() {
    // 方式2：先解构navigation对象（推荐，代码更简洁）
    const { navigation } = this.props;
    return(
      {/* 用下面两种方式之一都可以 */}
      {/* <TouchableOpacity onPress={()=>this.props.navigation.navigate("FoodScreen")}> */}
      <TouchableOpacity onPress={()=>navigation.navigate("FoodScreen")}>
        <View style={styles.foodCard} >
          <View>
            <Image style={styles.PromoImage} source={this.props.image} resizeMode='contain' blurRadius={1.5}/>
          </View>
          <View style={styles.textView}>
            <Text style={styles.foodTitle}>{this.props.text}</Text>
          </View>
        </View>
      </TouchableOpacity>
    );
  }
}

3. 确保你的App正确配置了React Navigation #

最后需要确认你的项目已经正确设置了导航栈，比如你需要创建一个导航容器并将App和FoodScreen加入到栈中（如果你还没做的话）：

// 假设你用的是React Navigation 6.x
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import App from './App';
import FoodScreen from './FoodScreen';

const Stack = createNativeStackNavigator();

export default function Main() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="App">
        <Stack.Screen name="App" component={App} />
        <Stack.Screen name="FoodScreen" component={FoodScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

（如果是旧版本的React Navigation，需要用createAppContainer，但现在推荐用v6以上的版本）

完成以上修改后，你的跳转功能应该就能正常工作了。

内容的提问来源于stack exchange，提问作者Faizan Butt