添加navigation.navigate到组件时出现“错误：未定义不是对象”？

I'm trying to implement navigation into my practice app:

我正在尝试在我的练习应用中实现导航：

onPress will cause a move from HomeScreen to ListingReview.

onPress将导致从HomeScreen迁移到ListingReview。

I'm not sure what's going wrong to be honest, though I have suspect I'm not passing props correctly.

我不确定说实话会出现什么问题，虽然我怀疑我没有正确地传递道具。

Please help!

请帮忙！

This is my repo: https://github.com/rphly/practice (Each object is created in a separate .js file in src/components.)

这是我的回购：https：//github.com/rphly/practice（每个对象都是在src / components中的一个单独的.js文件中创建的。）

Index.js

Index.js

import React, { Component } from 'react';
import { AppRegistry, ScrollView } from 'react-native';
import { StackNavigator } from 'react-navigation';
import Header from './src/components/Header';
import Card from './src/components/Card';
import ListingsFeed from './src/components/ListingsFeed';
import ListingReview from './ListingReview';

class HomeScreen extends Component {

    render() {

        return (
                <ScrollView> 
                    <Header />
                    <ListingsFeed />
                </ScrollView>
            );
        }
    }

export const App = StackNavigator({
    Home: { screen: HomeScreen, navigationOptions: {header: null} },
    ListingReview: { screen: ListingReview },
});

AppRegistry.registerComponent('hackathon', () => App);

ListingDetails.js (where I'm implementing onPress)

ListingDetails.js（我正在实现onPress）

import React from 'react';
import { View, Text, Image, Button } from 'react-native';
import { StackNavigator } from 'react-navigation';
import Card from './Card';
import CardSection from './CardSection';

 const ListingDetails = (props) => {

    return (

    <Card>
        <CardSection>
            <View style={styles.titleContainerStyle}>   
                <Text style={styles.titleContentStyle}>{props.listing.title}</Text>
            </View>
            <View style={styles.thumbnailContainerStyle}>
                <Image style={styles.thumbnailStyle} source={{uri: props.listing.primary_photo_url}}/>
            </View>

            <View style={styles.headerContentStyle}>    
                <Text style={{marginBottom: 5}} numberOfLines={15}>{props.listing.description.trim()}</Text>
                <Text style={styles.priceContentStyle}>${props.listing.price}</Text>
            </View>

            <Button
                onPress={() => navigation.navigate('ListingReview')}
                title= "Mark Listing"
                color = "#D2232A"
                />

        </CardSection>
    </Card>
    );
 };

 const styles = {
    headerContentStyle: {
        //backgroundColor: '#D2D2D2D2',
        justifyContent:'center',
        alignItems: 'center',
        marginLeft: 10
    },

    titleContainerStyle: {
        marginLeft: 10,
        marginBottom: 2,
        marginTop: 2

    },

    titleContentStyle: {
        fontSize: 15,
        fontWeight: 'bold'

    },

    thumbnailStyle: {
        height: 180,
        width: 180
    },

    thumbnailContainerStyle: {
        flexDirection: 'row',
        justifyContent: 'center',
        padding: 2,
        marginLeft: 5,
        marginRight: 5,
        marginTop: 5,
        marginBottom: 5

        //alignItems: 'flex-start'
    },

    priceContentStyle: {
        fontSize: 15,
        color: 'green'

    }
 };

 export default ListingDetails;

ListingFeed.js (where I connect ListingDetails and Index)

ListingFeed.js（我连接的是ListingDetails和Index）

import React, { Component } from 'react';
import axios from 'axios';
import { View } from 'react-native';
import ListingDetails from './ListingDetails'

class ListingsFeed extends Component {
    state = { listings:[] };

    componentWillMount() {
        axios.get('example.com/i-removed-the-url')
        .then( response => this.setState({ listings:response.data.data.products}));
        // this.setState({ listings:response.data.data.products})
    }

    renderListings() {
        return this.state.listings.map(listing =>
            <ListingDetails key={listing.id} listing={listing}/>
        );
    }

  render() {
    console.log(this.state);

    return (
      <View>
        {this.renderListings()}
      </View>
    );
  }
}

export default ListingsFeed;

2 个解决方案

#1

You have to pass the navigation props from your HomeScreen to your ListingsFeed component like <ListingsFeed navigation={this.props.navigation}/>. And then, to pass this same props to your ListingDetails : <ListingDetails key={listing.id} listing={listing} navigation={this.props.navigation}/>

您必须将导航道具从HomeScreen传递到ListingsFeed组件，例如 。然后，将相同的道具传递给您的ListingDetails：

In your ListingDetails component you call the navigation.navigate('ListingReview') function, but the navigation is defined nowhere in your component. You have to call props.navigation.navigate('ListingReview') instead (from props) or get a navigation const from props : const {navigation} = props;

在您的ListingDetails组件中，您可以调用navigation.navigate（'ListingReview'）函数，但导航在组件中无处定义。您必须调用props.navigation.navigate（'ListingReview'）（来自props）或从props获取导航const：const {navigation} = props;

#2

ListingDetails.js and ListingsFeed.js not in the stack.

ListingDetails.js和ListingsFeed.js不在堆栈中。

export const App = StackNavigator({
Home: { screen: HomeScreen, navigationOptions: {header: null} },
ListingReview: { screen: ListingReview },
ListingDetails: { screen: ListingDetails },
ListingsFeed:{screen:ListingsFeed}
});