Question

在我的react-native应用程序中，我有一个带有后退按钮的标题组件。它起作用，除了当我单击“后退”按钮时，它给我这个错误：未定义不是对象（正在评估this.props.navigation）

因此，我遵循了文档here，并尝试使用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()}>

应该工作正常。

react-navigation withNavigation返回未定义

1 个答案: