React Native中Card组件navigation.navigate未定义的TypeError问题排查

Hey there, let's break down why you're seeing that TypeError: undefined is not an object (evaluating 'this.props.navigation.navigate') error in your Card component, and fix it right away!

问题根源 #

The key thing to remember about React Navigation is: only components that are directly registered as screens in your navigator (like Home, Profile, Card in your RootNavigator) automatically receive the navigation prop.

In your Home component, you're rendering <Card /> as a regular child component—not as a screen navigated to via the navigator. That means the Card component doesn't get the navigation prop passed to it automatically, hence the undefined error when you try to access this.props.navigation.navigate.

两种解决方案 #

方案1：手动传递navigation prop #

The simplest fix is to pass the navigation prop from your Home component down to each Card instance. Update your home.js code like this:

<ScrollView>
  { this.state.cards.map((data, index) => { 
    return (
      <Card 
        key={data.id} 
        cardData={data} 
        navigation={this.props.navigation} {/* 手动传递navigation */}
      />
    ); 
  }) }
</ScrollView>

Now your Card component will have access to the navigation prop, and this.props.navigation.navigate will work as expected.

方案2：使用withNavigation高阶组件（更优雅） #

If you plan to use navigation in multiple child components (not just Card), using the withNavigation HOC is a cleaner approach—it injects the navigation prop into any component wrapped with it, no manual passing needed.

Update your card.js code:

import React, { Component } from 'react';
import { Button, View, Text, Image } from 'react-native';
import { withNavigation } from 'react-navigation'; // 导入withNavigation

class Card extends Component {
  constructor(props) { super(props); }
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
        <View style={{ flex: 0.30 }}>
          <Image source={{ uri: this.props.cardData.imgUrl }} style={{ height: 100 }} />
        </View>
        <View style={{ flex: 0.70, backgroundColor: 'steelblue' }}>
          <Text >{this.props.cardData.name}</Text>
          <Text >{this.props.cardData.imgUrl}</Text>
          <Button onPress={() => navigate('Profile', {})} title="Profile" />
        </View>
      </View>
    );
  }
}

export default withNavigation(Card); // 用withNavigation包裹后导出

This way, no matter where you render the Card component, it will always have access to the navigation prop.

小提醒 #

I noticed you have Profile registered in your RootNavigator but didn't import it in app.js—this is probably just a typo, but you'll want to fix that (import Profile from "./screens/profile";) to avoid another error when navigating to Profile.

内容的提问来源于stack exchange，提问作者Code Guru