获取undefined不是评估_this.props.navigation的对象

问题描述 投票:19回答:9

我正在使用DrawerNavigator,我有3页:Router pagemainScreenphotos page, 我制作了一个标题导航栏区域,我使用这个<TouchableHighlight onPress={() => this.props.navigation.navigate('DrawerOpen')}>打开主屏幕中的抽屉菜单,并将其用于照片页面,菜单在主屏幕中正常,但是当我在照片页面中单击<TouchableHighlight onPress={() => this.props.navigation.navigate('DrawerOpen')}>时,我收到此错误:Photo 我该如何解决这个问题?

我的照片页面:

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>

        )
    }
}
react-native react-navigation
9个回答
11
投票

也许我忽略了一些东西,但它看起来像一个简单的Javascript错误。你正在用纯粹的组件MyNavScreen破坏你的道具:

const MyNavScreen = ({ navigation }) => (

这意味着您无权访问this.props。你只需要访问destructured prop navigation。因此,未定义错误的原因确实未定义:

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

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

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

mainScreen上,你很好,因为它不是一个带有破坏性参数的纯粹组件。所以你仍然可以访问this.props中的render()

如果这会给你带来麻烦,你应该刷上destructing


10
投票

Binding this worked for me

在我的情况下,当我将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');
}

Or Simply use arrow function

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

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


6
投票

如果你在子元素中使用TouchableOpacity / Height,请将它传递给this.props.onPress,如下所示:

<TouchableOpacity onPress={this.props.onPress}/>

然后调用父组件中的onPress函数,如下所示:

<Parent onPress={this.Handlepress} />

5
投票

If you are using navigation in child component don't forget to send navigation in props to child

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

Access in child component like this

    props.navigation.navigate("ScreenName")

4
投票

试试这个:

import { withNavigation } from 'react-navigation';

withNavigation为整个项目/应用程序提供道具,您可以从任何地方访问导航道具。

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

最后,

export default withNavigation(MyPhotosHomeScreen);

看看这个https://reactnavigation.org/docs/en/connecting-navigation-prop.html


2
投票

这就是我在React Navigation 2版本中完成它的方法:我从openDrawer()调用StackNavigator方法,这是DrawerNavigator的子导航器。

这是我的DrawerNavigator

export const Drawer = DrawerNavigator(
    {
        MyAccount: {screen: TabsStack},
    });


export const TabsStack = StackNavigator({

    Tabs: {
        screen: Tabs, navigationOptions: ({navigation}) => ({
            headerLeft: (
                <TouchableOpacity style={{marginLeft: 10, marginTop: 3}}
                                  onPress={() => navigation.openDrawer()}>
                    <Image source={require('./assets/menu_h.png')}/>
                </TouchableOpacity>)
        })

1
投票

当我使用标题组件时,我遇到了同样的问题

现在您可以在其他组件中使用导航变量

<TouchableOpacity onPress={() => { this.props.navigation.navigate("Play");}}>

快乐的Codding :)


1
投票

功能组件以道具为参数。你应该试试这个

const MyNavScreen = ({props}) =>

然后调用没有此关键字的道具

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

0
投票

我遇到了同样的问题。这就是我解决它的方式:

  1. 验证所有构造函数都有“props”有参数
  2. 使用构造函数中的函数this.props.navigation.navigate绑定函数,如下所示:this.your_function = this.your_function.bind(this)
© www.soinside.com 2019 - 2024. All rights reserved.