undefined 不是对象（评估“this.props.navigation”）

Question

我正在尝试创建一个带有一些基本路由的 React Native 应用程序。

这是我目前的代码：

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' }
    })
}

一切正常，但按下按钮时，我得到了

找不到变量：导航

我读到我必须这样声明：

const { navigate } = this.props.navigation

所以我编辑了HomeButton.js 并在render 函数的开头添加了该行：

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>
    )
}

现在我明白了：

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

似乎navigation 对象没有进入属性，但我不明白我应该从哪里得到它。

我在这里错过了什么？

Answer 1

React-navigation 将导航属性传递给堆栈导航器中定义的屏幕组件。

所以在你的情况下，MainScreen 可以访问 this.props.navigation 但 HomeButton 不能。

如果您将导航道具从MainScreen 传递给HomeButton，它应该可以工作：

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

编辑：您必须在堆栈导航器中定义 Homescreen 才能导航到它，直到那时您的 onPress={() => navigate('Home')} 才会起作用。