在反应本机导航中调用导航道具方法时获取“未定义不是对象”

Question

我无法从原始屏幕之外的自定义组件调用反应导航方法，特别是我现在正在处理的方法是尝试在我制作的自定义标题组件的后向箭头中调用 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 答案：Getting undefined is not an object evaluating _this.props.navigation 答案是只放navigation.navigate(YourScreen)。我试过了，我得到的错误是“找不到变量导航”。

如何从自定义反应原生组件调用导航道具？

Answer 1

默认情况下，navigation 属性仅提供屏幕组件。您可以使用库提供的方法将任意组件连接到导航状态，也可以手动将导航作为道具传递。

选项 #1。使用withNavigation: React 导航导出一个高阶组件，您可以通过该组件将导航道具注入到您想要的任何组件中。为此，您可以执行以下操作：

1. 不要立即导出HeaderText 组件类（从该行中删除export）

2. 在该文件的底部添加export default withNavigation( HeaderText );

或者如果您不想使用默认导出并将其保留为命名导出，请改为：

const NavigationConnected = withNavigation( HeaderText );
export { NavigationConnected as HeaderText };

选项 #2。将navigation 作为道具传递：在SubmitReferralScreen 组件中，您可以简单地将this.props.navigation 作为道具传递给HeaderText 组件，例如：<HeaderText navigation={ this.props.navigation } />

Answer 2

这是因为您的 navigation 道具没有找到父级导航的 value 道具在哪里。最好使用常规箭头函数制作 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() 从任何屏幕/组件访问导航道具。

首先，在处理屏幕移动功能的组件上导入useNavigation。

import { useNavigation } from '@react-navigation/native';

创建一些常量来引用这个模块：

const navigation = useNavigation()

然后，只需像这样在您的 TouchableOpacity 的 onPress 道具上使用它；

<TouchableOpacity
  onPress={() => navigation.goBack()}
  style={styles.backButtonStyles}
>
  //...
</ TouchableOpacity>

获取关于此的完整文档： https://reactnavigation.org/docs/connecting-navigation-prop/