javascript - 在 native 导航中调用导航 Prop 方法时获取 'undefined is not an object'

Question

我在从原始屏幕之外的自定义组件调用 react 导航方法时遇到问题，特别是我现在正在处理的方法是尝试在我制作的自定义 header 组件的后退箭头中调用 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>
    );
  }

}

这是我的推荐屏幕 Stack Navigator:

// MainTabNavigator.js
const ReferralStack = createStackNavigator({
  Referrals: ReferralScreen,
  MakeReferral: SubmitReferralScreen,
});

我看过这个 StackOverflow 答案:Getting undefined is not an object evaluating _this.props.navigation答案是只放置 navigation.navigate(YourScreen)。我试过了，我得到的错误是“找不到变量导航”。

如何从自定义 React 原生组件调用导航 Prop ？

Answer 1

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

选项 #1。使用 withNavigation :React 导航导出一个高阶组件，通过它你可以将导航属性注入(inject)到你想要的任何组件中。为此，您可以执行以下操作:

1. 不要立即导出 HeaderText组件类(从该行删除 export)

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

或者如果您不想使用默认导出并将其保留为命名导出，请执行以下操作:

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

选项#2。路过navigation作为 Prop :在你的SubmitReferralScreen组件你可以简单地传递 this.props.navigation作为 HeaderText 的 Prop 组件如:<HeaderText navigation={ this.props.navigation } />