react-navigation withNavigation 返回 undefined

Posted 2023-03-31

【中文标题】react-navigation withNavigation 返回 undefined

【英文标题】：react-navigation withNavigation returns undefined

【发布时间】：2019-02-19 05:22:47

【问题描述】：

在我的 react-native 应用程序中，我有一个带有后退按钮的标题组件。它工作除了当我点击后退按钮时，它给了我这个错误：undefined is not an object (evalating 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);

【问题讨论】：

你是如何将 props 传递给 HeaderWithBackBtn 组件的？

【参考方案1】：

您要包装的组件是一个函数式组件，因此您需要以props.foo 而不是this.props.foo 的身份访问您的道具。

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

应该可以正常工作。