Try to search your question here, if you can't find : Ask Any Question Now ?

React Native error: undefined is not an object(evaluating '_this2.props.navigation.navigate')

HomeCategory: stackoverflowReact Native error: undefined is not an object(evaluating '_this2.props.navigation.navigate')
Avatarwillson asked 2 years ago

I’m new at React Native and currently I try to build an app using Stack Navigator.
When built, the HomePage.js screen work just fine, but when I tried to touch the to move to other screen, the error appeared. I tried to change to navigator.push() but the similar error appeared:undefined is not an object(evaluating ‘_this2.props.navigator.push’).

Can somebody take a look and point out my mistake? Thank you!

Here is the code:

App.js

import React, {Component} from "react";
import { Platform, StatusBar, StyleSheet, View,Image, Text, ListView } from "react-native";
import { AppLoading, Asset, Font } from "expo";
import { Ionicons } from "@expo/vector-icons";

import HomePage from "./app/pages/HomePage";
import AboutPage from "./app/pages/AboutPage";
import InfoPage from "./app/pages/InfoPage";
import MyFavoritePage from "./app/pages/MyFavoritePage";
import MyRequestPage from "./app/pages/MyRequestPage";
import RecentPage from "./app/pages/RecentPage";
import RequestPage from "./app/pages/RequestPage";

import { StackNavigator } from 'react-navigation';
export default class App extends Component {


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



export 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'
}
1 Answers
Best Answer
Avatarnaveen answered 2 years ago
Your Answer

4 + 1 =

Popular Tags

WP Facebook Auto Publish Powered By : XYZScripts.com