未定義不是對象（評估“ 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不是對象（評估'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}/>

編輯：您必須在堆棧導航器中定義Home屏幕才能導航到它，您的onPress={() => navigate('Home')}直到那時才起作用。