javascript - undefined 不是一个对象(评估 'this.props.navigation' )

Question

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

这是我到目前为止的代码:

应用程序.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' }
    })
}

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

Can't find variable: navigate

我读到我必须这样声明它:

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 (evaluating '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={() => navigator('Home')} 在此之前将无法工作。