未定义不是对象（评估“ this.props.navigation”）

Question

I'm trying to create a React Native app with some basic routing.

This is my code so far:

App.js:

import React from 'react'
import { StackNavigator } from 'react-navigation'
import MainScreen from './classes/MainScreen'


const AppNavigator = StackNavigator(
    {
        Index: {
            screen: MainScreen,
        },
    },
    {
        initialRouteName: 'Index',
        headerMode: 'none'
    }
);

export default () => <AppNavigator />

MainScreen.js:

import React, { Component } from 'react'
import { StyleSheet, Text, View, Button, TouchableOpacity, Image } from 'react-native'
import HomeButton from './HomeButton'

export default class MainScreen extends Component {
    static navigatorOptions = {
        title: 'MyApp'
    }

    constructor(props) {
        super(props)
    }

    render() {
        return (
            <View style={styles.container}>
                <Image source={require('../img/logo.png')} style={{marginBottom: 20}} />
                <HomeButton text='Try me out' classType='first' />
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center'
    }
})

HomeButton.js:

import React, { Component } from 'react'
import { StyleSheet, Text, View, Button, TouchableOpacity } from 'react-native'
import { StackNavigator } from 'react-navigation'


export default class HomeButton extends Component {
    constructor(props) {
        super(props)
    }

    render() {
        return (
            <TouchableOpacity
                onPress={() => navigate('Home')}
                style={[baseStyle.buttons, styles[this.props.classType].style]}
            >
                <Text style={baseStyle.buttonsText}>{this.props.text.toUpperCase()}</Text>
            </TouchableOpacity>
        )
    }
}

var Dimensions = require('Dimensions')
var windowWidth = Dimensions.get('window').width;

const baseStyle = StyleSheet.create({
    buttons: {
        backgroundColor: '#ccc',
        borderRadius: 2,
        width: windowWidth * 0.8,
        height: 50,
        shadowOffset: {width: 0, height: 2 },
        shadowOpacity: 0.26,
        shadowRadius: 5,
        shadowColor: '#000000',
        marginTop: 5,
        marginBottom: 5
    },
    buttonsText: {
        fontSize: 20,
        lineHeight: 50,
        textAlign: 'center',
        color: '#fff'
    }
})

const styles = {
    first: StyleSheet.create({
        style: { backgroundColor: '#4caf50' }
    })
}

Everything works fine, but when pressing the button I get

Can't find variable: navigate

I've read that I have to declare it like this:

const { navigate } = this.props.navigation

So I edited HomeButton.js and added that line at the beginning of the render function:

render() {
    const { navigate } = this.props.navigation
    return (
        <TouchableOpacity
            onPress={() => navigate('Home')}
            style={[baseStyle.buttons, styles[this.props.classType].style]}
        >
            <Text style={baseStyle.buttonsText}>{this.props.text.toUpperCase()}</Text>
        </TouchableOpacity>
    )
}

Now I get:

TypeError: undefined is not an object (evaluating 'this.props.navigation.navigate')

It seems that the navigation object is not coming into the properties, but I don't understand where should I get it from.

What am I missing here?

Answer 1

React-navigation pass navigation prop to the screen components defined in the stack navigator.

So in your case, MainScreen can access this.props.navigation but HomeButton can't.

It should work if you pass navigation prop from MainScreen to HomeButton :

<HomeButton text='Try me out' classType='first' navigation={this.props.navigation}/>

Edit: You have to define the Home screen in your stack navigator in order to navigate to it, your onPress={() => navigate('Home')} won't work until then.