TypeError:未定义不是react本机中的对象(计算this.props.navigation.navigate)

Question

我刚开始与反应本地人。这是代码

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组件中使用了Home

Answer 1

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

因为您在Card中直接使用home.js组件(而不是使用react导航导航到它)，所以不会注入导航支柱。如果您希望当前代码工作，则应从profile.js将导航支柱传递给您的卡组件。

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

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