未定义不是评估 _this.props.navigation 的对象 [英] Getting undefined is not an object evaluating _this.props.navigation

问题描述

我正在使用 DrawerNavigator 并且我有 3 个页面:Router page、mainScreen 和一个 photos page,
我做了一个标题导航栏区域，我使用了这个 <TouchableHighlight onPress={() =>this.props.navigation.navigate('DrawerOpen')}> 在 mainScreen 打开 Drawer 菜单并将其用于照片页面，菜单在 mainScreen 中没问题，但是当我点击 <TouchableHighlight onPress={() =>this.props.navigation.navigate('DrawerOpen')}> 在照片页面中，我收到此错误:
我该如何解决?

I'm using DrawerNavigator and I have 3 pages: Router page, mainScreen and a photos page,
I maked a header navbar area and I used This <TouchableHighlight onPress={() => this.props.navigation.navigate('DrawerOpen')}> to open Drawer menu in mainScreen and used that for photos page too, menu is ok in mainScreen, But when I click <TouchableHighlight onPress={() => this.props.navigation.navigate('DrawerOpen')}> in photos page, I got this error:
How Can I fix That?

我的照片页面:

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>

        )
    }
}

推荐答案

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

Perhaps I'm overlooking something, but it just looks like a simple Javascript error. You're destructing your props in your pure component MyNavScreen:

const MyNavScreen = ({ navigation }) => (

这意味着您无权访问 this.props.您只需访问解构的道具 navigation.因此，未定义错误的原因是因为这确实是未定义的:

This means that you don't have access to this.props. You just have access to the destructured prop navigation. Hence the reason for the undefined error as this really is undefined:

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

如果你改为直接使用navigation，它应该可以工作:

If you change it instead to use navigation directly, it should work:

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

在mainScreen 上，您很好，因为它不是带有解构参数的纯组件.所以你仍然可以在 render() 中访问 this.props.

On mainScreen, you are fine because it's not a pure component with destructured arguments. So you still have access to this.props in render().

你应该复习破坏如果这给您带来了麻烦.

You should brush up on destructing if this is causing you trouble.

这篇关于未定义不是评估 _this.props.navigation 的对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！