随着逐步返回的反应导航未定义

Question

在我的反应应用应用中，我的标题有一个带有后按钮的组件。它有效，除了我单击"返回"按钮时，它给了我这个错误： undefined不是对象（评估this.props.nevigation）

所以我在这里关注文档，并尝试使用withNavigation。但是我仍然遇到同样的错误。我在做什么错？

import React from 'react'
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native'
import { withNavigation } from 'react-navigation';
const HeaderWithBackBtn = (props) => {
    return (
        <View style={styles.container}>
            {/* Back button */}
            <TouchableOpacity 
                style={{width: 100}} 
                onPress={() => this.props.navigation.goBack()}>
                <Text style={styles.backBtn}>Back</Text>
            </TouchableOpacity>
            <Text style={styles.text}> {props.screen} </Text>
            {/* Placeholder button */}
            <Text style={{width: 100}}></Text>
        </View>
    )
}
const styles = StyleSheet.create({
    ...
});
export default withNavigation(HeaderWithBackBtn);

Answer 1

要包装的组件是功能组件，因此您需要访问道具作为props.foo而不是this.props.foo。

onPress={() => props.navigation.goBack()}>

应该正常工作。