Получение 'undefined не является объектом' при вызове методов поддержки навигации в реагирующей нативной навигации

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: Получение undefined не является объектом, оценивающим _this.props.navigation И ответом было поставить только navigation.navigate(YourScreen) Я попробовал это, и я получил ошибку "не могу найти переменную навигацию".

Как мне вызвать навигационные реквизиты из собственных компонентов реагирования?

Answer 1

По умолчанию только компоненты экрана предоставляются с пропеллой navigation. Вы можете либо использовать предоставляемые библиотекой способы подключения произвольных компонентов к состоянию навигации, либо вы можете передать навигацию вручную как опору.

Вариант № 1. Использование withNavigation: React navigation экспортирует компонент более высокого порядка, с помощью которого вы можете вставить навигационные реквизиты в любой компонент, который вы хотите. Для этого вы можете сделать что-то вроде:

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 } />