我在从原始屏幕之外的自定义组件调用react导航方法时遇到问题，特别是我现在正在处理的一个组件，它试图在我制作的自定义标题组件（下面的代码）的返回箭头中调用goBack（）。单击后退箭头时收到的错误消息是：
undefined is not an object (evaluating '_this2.props.navigation.goBack')
下面是代码：
// HeaderText.js
import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Platform } from 'react-native';
import { Icon } from 'expo';
export class HeaderText extends React.Component {
render() {
const needsBackButton = this.props.backIcon;
if (needsBackButton) {
return(
<View style={[styles.headerStyle,styles.buttonHeaderStyle]}>
<TouchableOpacity onPress={() => this.props.navigation.goBack()} style={styles.backButtonStyles}><Icon.Ionicons size={25} style={{ color: '#fff', fontWeight: 'bold' }} name={Platform.OS === 'ios' ? `ios-arrow-back` : 'md-arrow-back'} /></TouchableOpacity>
<Text style={styles.textStyle}>{this.props.headerText}</Text>
<View style={styles.emptyViewStyles} />
</View>
);
} else {
return(
<View style={styles.headerStyle}>
<Text style={styles.textStyle}>{this.props.headerText}</Text>
</View>
);
}
}
}
这是我将HeaderText组件放入的屏幕：
// SubmitReferralScreen.js
import React from 'react';
import {
Image,
Platform,
ScrollView,
StyleSheet,
Text,
TouchableOpacity,
View,
ImageBackground
} from 'react-native';
import { MonoText } from '../../components/general/StyledText';
import { HeaderText } from '../../components/general/HeaderText';
import { HomeScreenContainer } from '../../components/homeScreen/HomeScreenContainer';
import { IconButton } from '../../components/general/IconButton';
import { StatusInfo } from '../../constants/StatusInfo';
import SvgUri from 'react-native-svg-uri';
export default class SubmitReferralScreen extends React.Component {
static navigationOptions = {
header: null,
};
render() {
return (
<View style={{flex: 1, width: '100%',justifyContent: 'center', alignItems: 'center'}}>
<ImageBackground source={require('../../assets/images/background.png')} style={{width: '100%', height: '100%', flex: 1, justifyContent: 'flex-start', alignItems: 'center', backgroundColor: 'background-color: rgba(0, 0, 0, 0.5)',}}>
<HeaderText backIcon='true' headerText='New Referral' />
<Text>Submit referral here!</Text>
</ImageBackground>
</View>
);
}
}
这是我的参考屏幕堆栈导航器：
// MainTabNavigator.js
const ReferralStack = createStackNavigator({
Referrals: ReferralScreen,
MakeReferral: SubmitReferralScreen,
});
我已经看过这个StackOverflow答案：未定义并不是一个评估这个的对象。道具。导航，答案是只放导航。导航（您的屏幕）。我试过了，错误是“找不到变量导航”
如何从自定义react本机组件调用导航道具？
默认情况下，只有屏幕组件提供了导航道具。您可以使用库提供的方法将任意组件挂接到导航状态，也可以手动将导航作为道具传递。
选项#1。使用导航：React导航导出一个高阶组件，通过它您可以将导航道具注入到您想要的任何组件中。要做到这一点，你可以这样做：
>
不要立即导出标题文本组件类（从该行中删除导出）
在该文件的底部添加export default with navigation（HeaderText）
或者，如果您不想使用默认导出并将其保留为命名导出，请改为：
const NavigationConnected = withNavigation( HeaderText );
export { NavigationConnected as HeaderText };
选项#2。将导航作为道具传递：在SubmitReferralScreen组件中，您可以简单地将this.props.navigation作为道具传递给HeaderText组件，如：
这是因为您的navigationprop没有找到来自父级的导航值prop的位置。最好使用常规箭头函数制作HeaderText组件，如下所示；
const HeaderText = ({ needsBackButton }) => {
if(needsBackButton) {
return (
<View style={[styles.headerStyle,styles.buttonHeaderStyle]}>
<TouchableOpacity onPress={() => this.props.navigation.goBack()} style={styles.backButtonStyles}><Icon.Ionicons size={25} style={{ color: '#fff', fontWeight: 'bold' }} name={Platform.OS === 'ios' ? `ios-arrow-back` : 'md-arrow-back'} /></TouchableOpacity>
<Text style={styles.textStyle}>{this.props.headerText}</Text>
<View style={styles.emptyViewStyles} />
</View>
)
}
return (
// another component
)
}
然后，您可以简单地使用useNavigation（）从任何屏幕/组件访问导航道具。
首先，导入处理移动屏幕功能的组件上的使用导航。
import { useNavigation } from '@react-navigation/native';
创建一些常量以引用此模块：
const navigation = useNavigation()
然后，像这样在你的touchablepacity的onPress道具上使用它；
<TouchableOpacity
onPress={() => navigation.goBack()}
style={styles.backButtonStyles}
>
//...
</ TouchableOpacity>
获取有关以下内容的完整文档：https://reactnavigation.org/docs/connecting-navigation-prop/
