React Native 错误：未定义不是一个对象(评估 '_this2.props.navigation.navigate')

Question

我是React Native的新手，目前我尝试使用Stack Navigator构建一个应用程序。构建时，homepage.js屏幕工作正常，但是当我试图触摸移动到其他屏幕时，出现了错误。我试图更改为navigator.push（），但是出现类似的错误：未定义不是对象（评估'_this2.props.navigator.push'）。

有人可以看一下我的错误吗？谢谢！

这是代码：

app.js

import React, {Component} from "react";
import { Platform, StatusBar, StyleSheet, View,Image, Text, ListView } from "react-native";
import HomePage from "./pages/HomePage";
import AboutPage from "./pages/AboutPage";
import InfoPage from "./pages/InfoPage";
import MyFavoritePage from "./pages/MyFavoritePage";
import MyRequestPage from "./pages/MyRequestPage";
import RecentPage from "./pages/RecentPage";
import RequestPage from "./pages/RequestPage";
import { StackNavigator } from 'react-navigation';
export default class App extends Component {

  render() {
    return (
      <RootNavigator/>
    );
  }
}

const RootNavigator = StackNavigator({
  Home: {
    screen: HomePage,
  },
  Info: {
    screen: InfoPage,
  },
  About: {
    screen: AboutPage,
  },
  MyFavorite: {
    screen: MyFavoritePage,
  },
  MyRequest: {
    screen: MyRequestPage,
  },
  Recent: {
    screen: RecentPage,
  },
  Request: {
    screen: RequestPage,
  },
});

homepage.js

import React from 'react'
import { StyleSheet, View, Text, TouchableOpacity, FlatList, Image } from 'react-native'
import { AboutPage, InfoPage, MyFavoritePage, MyRequestPage, RecentPage, RequestPage } from '../Route'

export default class HomePage extends React.Component {
    render () {
        return (
            <View style={styles.container} >
                {this.renderItem('Request', 0xF1B136FF, Imgsource.compose, RequestPage)}
                {this.renderItem('Recent', 0x13B0A5FF, Imgsource.recent, RecentPage)}
                {this.renderItem('MyRequest', 0xEF6363FF, Imgsource.myrequest, MyRequestPage)}
                {this.renderItem('MyFavorite', 0xEF6363FF, Imgsource.favorite, MyFavoritePage)}
                {this.renderItem('About', 0xEF6363FF, Imgsource.about, AboutPage)}
                {this.renderItem('Info', 0xEF6363FF, Imgsource.info, InfoPage)}
            </View>
        )
    }
    renderItem (text, bgColor, imgsrc, route) {
        return (
            <TouchableOpacity
                style={[styles.itemContainer, {backgroundColor: bgColor}]}
                    /*onPress={() => this.props.navigator.push(route())}*/
                    onPress={() => this.props.navigaton.navigate(text)}
                activeOpacity={0.6}
            >
                {/*<Image source= {{uri: imgsrc}} />*/}
                <Text style={styles.itemTxt} >{text}</Text>
            </TouchableOpacity>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    itemContainer: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    },
    itemTxt: {
        color: 'white',
        fontSize: 28,
        marginTop: 10
    },
})

const Imgsource = {
    compose : '../components/img/request.png',
    info : '../components/img/info.png',
    favorite : '../components/img/favorite.png',
    recent : '../components/img/recent.png',
    myrequest : '../components/img/myrequest.png',
    about : '../components/img/about.png'
}

Answer 1

您的代码中有一个错字。

更改您的this.props。 navigaton。 navigation .navigate。

Answer 2

它具有参考问题。将以下代码添加到您的HomePage类：

 constructor(props) {
        super(props);
        this.renderItem = this.renderItem.bind(this);
      }

并使用navigate进行导航

onPress={() => this.props.navigaton.navigate(text)}

另外，通过您的父[App] Component

传递道具

render() {
    return (
      <HomePage {...this.props} />
    );
  }