类型错误：无法读取未定义的属性"goBack"

Question

所以情况是，我想在我的应用程序顶部实现一个GoBack图标，该图标将返回到上一页。我正在使用堆栈导航器并禁用了标题。所以我需要一个返回按钮。我决定为此制作一个组件，这是我的代码，

import { Ionicons } from '@expo/vector-icons';
function GoBack(){
return (
<Ionicons onPress={()=>this.props.navigation.goBack()} name="md-arrow-back" size={24} color="#0c85f3" />
);
}
export default GoBack;

如果我这样做，那么它就会向我显示一个类型错误：无法读取未定义的属性"goBack"，但是如果我将 onPress 作为 props 并实现相同的代码行onPress={()=>this.props.navigation.goBack()}它就可以完美运行。

我不能到处应用新闻道具。这是一个有很多屏幕的应用程序。如何在组件本身中应用它？ 我认为我对 React 导航缺乏深刻的理解。也请帮助我理解解决方案。

以下是我如何使用GoBack组件：

import React, { Component } from 'react';
import {View, StyleSheet, Text, FlatList} from 'react-native';
import TestRoomtData from '../../../testData';
import HistoryCard from '../../../components/cards/historyUserCard';
import GoBack from '../../../shared/goBackButton';

class UserHistory extends Component{
render(){
return(
<View style={styles.container}>
<View style={{flexDirection:"row",}}>
<GoBack />
<Text style={styles.title}>History</Text>
</View>
<Text  style={styles.title01}>Past Patients</Text>
<FlatList 
data={TestRoomtData}
renderItem={({item})=>([
<View>
<HistoryCard 
prescription={item.prescription}
diagnosis={item.diagnosis}
date={item.date}
source={{
uri: item.uri
}}
btnText01="More"
btnText02="Edit"
onPressBtn2={()=> this.props.navigation.navigate('Edit History') }/>
</View>
]
)}
/>
</View>


);
}
}

Answer 1

它是一个功能组件，

第一：所以你不能用this.，
第二：你忘了得到props

function GoBack(props){  // <---- HERE
return (
<Ionicons 
onPress={props.navigation.goBack}  // <---- HERE
name="md-arrow-back" size={24} color="#0c85f3" />
);
}

Answer 2

在 react 的功能组件中，你不能使用this关键字来访问 props。 在当前情况下，您必须传递导航道具GoBack像这样的东西，

function Goback(props) {
const { navigation } = props;
return (
<Ionicons 
onPress={() => navigation.goBack()} 
name="md-arrow-back" 
size={24} 
color="#0c85f3" 
/>
);
}

现在，调用 GoBack 组件，

<GoBack 
navigation={{ goBack: () => goBack() }}
/>