"Error: Undefined is not an object" when adding navigation.navigate to a component?

Question

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

onPress 将导致从 HomeScreen 移动到 ListingReview。

老实说，我不确定出了什么问题，尽管我怀疑我没有正确传递道具。

请帮忙！

这是我的回购：https://github.com/rphly/practice （每个对象都在 src/components 中的单独 .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（我正在实施 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（我连接 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;

Answer 1

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

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

Answer 2

您必须将导航道具从主屏幕传递到您的 ListingsFeed 组件，例如 <ListingsFeed navigation={this.props.navigation}/>。然后，将相同的道具传递给您的 ListingDetails ：<ListingDetails key={listing.id} listing={listing} navigation={this.props.navigation}/>

在您的 ListingDetails 组件中，您调用了 navigation.navigate('ListingReview') 函数，但在您的组件中没有定义导航。你必须调用 props.navigation.navigate('ListingReview') 代替（从道具）或从道具获取导航常量：const {navigation} = props;

"Error: Undefined is not an object" when adding navigation.navigate to a component?

"Error: Undefined is not an object" when adding navigation.navigate to a component?

javascript

reactjs

react-native

react-navigation