TypeError: undefined is not an object (evalating this.props.navigation.navigate) in react native

Question

我刚刚开始使用 React Native。这是代码

app.js

import React, { Component } from 'react';

import { StackNavigator } from 'react-navigation';

import Splash from "./screens/splash";
import Home from "./screens/home";
import Card from "./screens/card";

export const RootNavigator = StackNavigator({
  Home: {
    screen: Home,
    navigationOptions: {
      header: null,
    },
  },
  Profile: {
    screen: Profile,
    navigationOptions: {
      headerTitle: 'Profile',
    },
  },
  Card: {
    screen: Card,
    navigationOptions: {
      header: null,
    },
  },
});

export default class App extends Component {

  constructor(props) {
    super(props);

    this.state = { showSplash: true };

    // after 1200ms change showSplash property for spalsh screen
    setTimeout(() => {
      this.setState(previousState => {
        return { showSplash: false };
      });
    }, 1200);
  }

  render() {
    if (this.state.showSplash) {
      return (<Splash />);
    } else {
      return (<RootNavigator />);
    }
  }
}

在home.js中我是这样直接使用卡片组件的

<ScrollView>
{
  this.state.cards.map((data, index) => {
    return (
      <Card key={data.id} cardData={data} />
    );
  })
}

这里是 card.js

import React, { Component } from 'react';
import { Button, View, Text, Image } from 'react-native';

export default 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={() => this.props.navigation.navigate('Profile', {})}
                        title="Profile"
                    />
                </View>
            </View>
        );
    }
}

现在如果我使用

const { navigate } = this.props.navigation;

在 profile.js 中它可以工作，但在 card.js 的情况下它会显示

TypeError : undefined is not an object (evaluating 'this.props.navigation.navigate')

这个问题被问了很多次，并尝试了答案提供的所有解决方案，但没有一个答案有帮助。

这可能是什么问题？这是因为我在Home 组件中使用了<Card>

Answer 1

如果我理解正确，home.js 屏幕中的Card 组件是card.js 中的组件。

因为您在 home.js 中直接使用 Card 组件（没有使用 react-navigation 导航到它），所以导航道具没有被注入。如果你想让你当前的代码工作，你应该从 profile.js 将导航道具传递给你的卡片组件

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

很可能，您正在使用this.props.navigation.navigate('Profile') 打开您的 profile.js 屏幕，所以它在那里工作正常。