React 네이티브 오류 : 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

[앱] 구성 요소를 부모에서 소품을 통과

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

및

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

또한 탐색 navigate를 사용하여 HomePage 클래스에 다음 코드를 추가합니다 당신의 코드.

this.props를 변경하십시오. navigaton.이 탐색 .props. navigation. navigate.

Answer 2

그것은 참조 문제를 갖는다 : 여기

코드이다. 오타에있다

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