React Native错误：undefined不是对象（评估'_this2.props.navigation.navigate'）

Question

我是React Native的新手，目前我尝试使用Stack Navigator构建应用程序。构建时，HomePage.js屏幕工作正常，但当我尝试触摸移动到其他屏幕时，出现错误。我尝试更改为navigator.push（）但出现了类似的错误：undefined不是对象（评估'_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.navigate更改为this.props.navigation.navigate。

Answer 2

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

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

并使用navigate进行导航

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

此外，从您的父[App]组件传递道具

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