添加导航时"Error: Undefined is not an object"。导航到组件？

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

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

在您的列表中，您调用navigation.navigate('ListingReview')函数，但导航在组件中没有定义。您必须致电props.navigation.navigate('ListingReview')（来自Props）或从道具中获取导航句子：const {navigation} = props;

Answer 2

listingdetails.js和listingsfeed.js不在堆栈中。

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