Javascript &引用；错误：未定义不是对象；添加导航时。是否导航到组件？

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

on按

将导致从

主屏幕

移动到

列表查看

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

请帮忙

这是我的回购协议： （每个对象都在

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

ListingFeed.js（其中我连接了

ListingDetails

和

Index

）

import React，{Component}来自'React'；
从“axios”导入axios；
从“react native”导入{View}；
从“/ListingDetails”导入ListingDetails
类ListingsFeed扩展组件{
state={listings:[]}；
组件willmount（）{
axios.get（'example.com/i-removed-the-url'）
.then（response=>this.setState（{listings:response.data.data.products}））；
//this.setState（{listings:response.data.data.products}）
}
RenderStings（）{
返回此.state.listings.map（清单=>
);
}
render（）{
console.log（this.state）；
返回(
{this.renderStings（）}
);
}
}
导出默认列表提要；

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

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

---

您必须将导航道具从主屏幕传递到ListingsFeed组件，如

。然后，将同样的道具传递给您的ListingDetails:

---

在ListingDetails组件中，可以调用

导航.navigate（'ListingReview'）

函数，但导航在组件中没有定义。您必须调用

props.navigation.navigate（'ListingReview'）

（从props）或从props获取导航常量：

const{navigation}=props
啊，是的！非常感谢。我知道这与道具有关，但我不确定我在哪里没有穿过它。：）
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;

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