TypeError:undefined不是反应原生的对象(评估this.props.navigation.navigate)

[英]TypeError: undefined is not an object (evaluating this.props.navigation.navigate) in react native


I have just started with React Native. Here is the code

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

app.js

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 />);
    }
  }
}

In the home.js I am using card component directly like this

在home.js我直接使用卡片组件

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

and here is the card.js

这是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>
        );
    }
}

Now if I use

现在,如果我使用

const { navigate } = this.props.navigation;

in the profile.js it works but in case of card.js it is showing

在profile.js它的工作原理,但在card.js的情况下,它显示

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

This question is asked many times and tried all the solutions provided by the answers, but none of the answers helped.

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

What could be this possible issue? Is this because I am using <Card> in the Home component

这可能是什么问题?这是因为我在Home组件中使用

1 个解决方案

#1


1  

If I understood correctly, Card component in your home.js screen is component in card.js.

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

Because you are using Card component directly in home.js (not navigating to it with react-navigation), navigation prop is not being injected. If you want your current code to work, you should pass navigation prop to your card component from profile.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>

Most probably, you are opening your profile.js screen with this.props.navigation.navigate('Profile'), so it is working fine there.

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


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2018/01/25/323ee686dbf9c29518442d3944f2aa97.html



 
  © 2014-2022 ITdaan.com 联系我们: