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

Question

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

我的照片页

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;

mainScreen：

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

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

const MyNavScreen = ({ navigation }) => (

这意味着您无法访问this.props。您只需访问结构化道具navigation即可。因此，未定义错误的原因确实未定义：

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

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

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

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

如果这会给你带来麻烦，你应该在destructing上加油。

Answer 2

绑定它对我有用

就我而言，当我将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');
}

或者只需使用箭头功能

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

因为使用表达式功能时，它将创建它自己的作用域。

Answer 3

如果您在子元素中使用TouchableOpacity / Height，请将其this.props.onPress传递给它：

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

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

<Parent onPress={this.Handlepress} />

Answer 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

Answer 5

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

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

像这样子组件中的访问

    props.navigation.navigate("ScreenName")

Answer 6

这是我在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>)
        })

Answer 7

然后您试图进入另一个视图，则必须在导入的组件的onPress中使用它来发送对象导航

示例

在视图中实现组件 <CardComponent title="bla bla" navigation={this.props.navigation} />

组件模板

<View> <Button title={this.props.title} onPress={()=> this.props.navigation.navigate("anotherAwesomeView")}/> </View>

此问题是因为您要实现的组件未在stackNavigation上定义，因此，methot导航对您不可用，并且通过参数传递此对象导航器，您将可以访问它

Answer 8

我在使用标头组件时遇到了同样的问题

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

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

快乐披巾:)

Answer 9

功能组件以props作为参数。 您应该尝试

const MyNavScreen = ({props}) =>

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

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

Answer 10

我遇到了同样的问题。我就是这样解决的：

1. 验证您所有的构造函数都有“ props”参数
2. 像下面这样在构造函数中使用函数this.props.navigation.navigate来绑定函数：this.your_function = this.your_function.bind(this)

Answer 11

当您在createStackNavigator中定义屏幕时，默认情况下会传递一个称为Navigation的道具， 像这样=> navigation={this.props.navigation}

但是当您使用this.props.navigation.navigator("YOUR SCREEN ")时 并且未在createStackNavigator上定义此屏幕，则必须通过navigation={this.props.navigation}表单（在createStackNavigator中定义的屏幕），然后才能在组件中使用它。

Answer 12

ProductScreen类扩​​展了组件{

导出默认的ProductScreen； //确保在此行底部提到

呼叫此

  <TouchableOpacity
        onPress = {() => this.props.navigation.navigate('ProductAddScreen')}
        activeOpacity={0.7} style={styles.button}>

       <Text style={styles.message}>{this.state.notFound} </Text>

  </TouchableOpacity>