如果您在子组件中使用导航，请不要忘记将导航作为道具发送给子组件

Question

获取未定义的不是对象（评估'_this.props.navigation'）

2017-07-20

151587

react-native react-navigation

我正在使用 DrawerNavigator ，我有 3 个页面： 路由器页面 、 主屏幕 和 照片页面 。

我制作了一个标题导航栏区域，并使用这个 <TouchableHighlight onPress={() => this.props.navigation.navigate('DrawerOpen')}> 在主屏幕中打开抽屉菜单，并将其用于照片页面，菜单在主屏幕中正常，但是当我单击 <TouchableHighlight onPress={() => this.props.navigation.navigate('DrawerOpen')}> 在照片页面中，我收到错误：

undefined is not an object (evaluating '_this.props.navigation')

我该如何解决这个问题？

我的照片页面：

import React from 'react';
import { Button, ScrollView, View, Text, StyleSheet, TouchableHighlight } from 'react-native';
import { DrawerNavigator } from 'react-navigation';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import Icon from 'react-native-vector-icons/FontAwesome'

const MyNavScreen = ({ navigation }) => (
  <View>
    <View style={styles.containerNavbar}>
      <TouchableHighlight onPress={() => this.props.navigation.navigate('DrawerOpen')}>
        <Icon name="bars" size={30} color="#fff" />
      </TouchableHighlight>
      <Text style={styles.navbarTitle}>Photos</Text>
    </View>

    <ScrollView>
      <View><Text>photo</Text></View>
      <Button onPress={() => navigation.goBack(null)} title="Go back" />
    </ScrollView>
  </View>
);

const MyPhotosHomeScreen = ({ navigation }) => (
  <MyNavScreen navigation={navigation} />
);
MyPhotosHomeScreen.navigationOptions = {
  title: 'Photos',
  drawerIcon: ({ tintColor }) => (
    <MaterialIcons
      name="photo"
      size={24}
      style={{ color: tintColor }}
    />
  ),
};
export default MyPhotosHomeScreen;

主屏幕：

export default class MainScreen extends React.Component {
    static navigationOptions = {
        drawerLabel: 'Home',
        drawerIcon: ({ tintColor }) => (
            <MaterialIcons
                name="home"
                size={24}
                style={{ color: tintColor }}
            />
        )
    };

    render() {
        return (
            <View>
                <View style={styles.containerNavbar}>
                    <TouchableHighlight onPress={() => this.props.navigation.navigate('DrawerOpen')}>
                        <Icon name="bars" size={30} color="#fff" />
                    </TouchableHighlight>
                    <Text style={styles.navbarTitle}>mainScreen</Text>
                </View>

                <View>
                    <View style={styles.containerFooter}>
                        <Text style={styles.footerTitle}>Footer</Text>
                    </View>
                </View>
            </View>

        )
    }
}

Answer 1

如果您在子组件中使用导航，请不要忘记将导航作为道具发送给子组件

    <ChildComponent navigation={this.props.navigation}/>

像这样在子组件中访问

    props.navigation.navigate("ScreenName")

Answer 2

也许我忽略了一些东西，但它看起来只是一个简单的 Javascript 错误。您正在纯组件 MyNavScreen 中破坏您的 props：

const MyNavScreen = ({ navigation }) => (

这意味着您无权访问 this.props 。您只能访问解构的 prop navigation 。因此，未定义错误的原因实际上是未定义的：

<TouchableHighlight onPress={() => this.props.navigation.navigate('DrawerOpen')}>

如果您将其更改为直接使用 navigation ，它应该可以工作：

<TouchableHighlight onPress={() => navigation.navigate('DrawerOpen')}>

在 mainScreen 上，您没问题，因为它不是具有解构参数的纯组件。因此，您仍然可以在 render() 中访问 this.props 。

如果这给您带来了麻烦，您应该复习一下 destructing 。

Answer 3

绑定 this 对我有用

就我而言，当我将 this 绑定到在构造函数中调用 prop 的方法时，它起作用了。

constructor(props){
    super(props);
    this.showDetails = this.showDetails.bind(this);// you should bind this to the method that call the props
}

showDetails(_id){
    this.props.navigation.navigate('Details');
}

对于功能组件，请尝试 useNavigation 钩子进行深度导航

或者简单地使用箭头函数

showDetails = (_id) => {
      this.props.navigation.navigate('Details');
}

因为当您使用表达式函数时，它将创建 它自己的范围 。