Question

我无法从原始屏幕之外的自定义组件调用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答案：Getting undefined is not an object evaluating _this.props.navigation 答案是只放入navigation.navigate(YourScreen)。我尝试了一下，然后错误提示“找不到变量导航”。

如何通过自定义反应本机组件调用导航道具？

Answer 1

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

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

不要立即导出HeaderText组件类（从该行中删除export）
在该文件的底部添加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道具没有找到父级导航的价值道具在哪里。最好使用常规箭头功能制作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的{{1}}道具上使用它；

onPress

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

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

2 个答案: