React native “未定义”不是评估_this.props.navigation的对象

我使用的是

DrawerNavigator

，我有3个页面：

路由器页面

，

主屏幕

和

照片页面

，
我创建了一个标题导航栏区域，并使用此

This.props.navigation.navigate（'drawerropen'）}>

在主屏幕中打开抽屉菜单，并将其用于照片页面，主屏幕中的菜单也可以，但当我在照片页面中单击

This.props.navigation.navigate（'drawerropen'）}>

时，我得到了以下错误：
我怎样才能解决这个问题

我的照片页面：

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”导入React；
从“react native”导入{按钮、滚动视图、视图、文本、样式表、TouchableHighlight}；
从“react navigation”导入{DroperNavigator}；
从“反应本机矢量图标/唯物主义者”导入唯物主义者；
从“react native vector icons/Fontsome”导入图标
常量MyNavScreen=（{navigation}）=>(
this.props.navigation.navigate（'drawerropen'）}>
照片
照片
navigation.goBack（null）}title=“返回”/>
);
常量MyPhotoshotHomeScreen=（{navigation}）=>(
);
MyPhotosHomeScreen.navigationOptions={
标题:"照片",，
抽屉图标：（{tintColor}）=>(
),
};
导出默认的MyPhotoshot主屏幕；

主屏幕：

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.Component{
静态导航选项={
抽屉标签：“家”，
抽屉图标：（{tintColor}）=>(
)
};
render（）{
返回(
this.props.navigation.navigate（'drawerropen'）}>
主屏幕
页脚
)
}
}

也许我忽略了什么，但它看起来只是一个简单的Javascript错误。您正在销毁纯组件中的道具

MyNavScreen

：

const MyNavScreen = ({ navigation }) => (

这意味着您无权访问

This.props

。您只需访问解构的道具

导航

。因此出现未定义错误的原因是，这实际上是未定义的：

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

在

main屏幕上

，您很好，因为它不是一个具有解构参数的纯组件。因此，您仍然可以在

render（）

中访问

this.props

---

如果这会给您带来麻烦，您应该重新考虑。

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

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

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

<Parent onPress={this.Handlepress} />

---

我在使用header组件时遇到了相同的问题

现在，您可以在其他组件中使用导航变量，如下所示

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

{this.props.navigation.navigate（“Play”）；}>

---

快乐编码：）

我在React Navigation 2发行版中就是这样做的：我从

StackNavigator

调用

openDrawer（）

方法，它是

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>)
        })

export const Drawer=DrawerNavigator(
{
我的帐户：{screen:TabsStack}，
});
export const TabsStack=StackNavigator({
选项卡：{
屏幕：选项卡，导航选项：（{navigation}）=>({
左校长：(
navigation.openDrawer（）}>
)
})

绑定这个对我来说很有用 在我的例子中，当我将

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');
}

或者简单地使用箭头功能 因为当您使用表达式函数时，它将创建自己的作用域

---

试试这个：

import { withNavigation } from 'react-navigation';

使用导航

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

及

最后,

export default withNavigation(MyPhotosHomeScreen);

查看此

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

---

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

验证所有构造函数都有“props”参数

在构造函数中使用函数

this.props.navigation.navigation

，如下所示：

this.your\u函数=this.your\u函数.Bind（this）

---

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

const MyNavScreen = ({props}) =>

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

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

---

在createStackNavigator中定义screen时，默认情况下它会传递一个名为navigation的道具， 类似这样的东西=>

navigation={this.props.navigation}

但是当您使用

this.props.navigation.navigator（“您的屏幕”）

---

并且没有在createStackNavigator中定义此屏幕。您必须将

导航={this.props.navigation}

传递到createStackNavigator中定义的屏幕，然后才能在组件中使用它。

类ProductScreen扩展组件{

导出默认ProductScreen；//请确保这一行的底部提到

称之为

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

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

  </TouchableOpacity>

this.props.navigation.navigate（'ProductAddScreen'）}
activeOpacity={0.7}style={styles.button}>
{this.state.notFound}

如果希望在子组件中导航，则必须在子组件中获取道具。 假设您有3个组件—组件1、组件2、组件3，并且您希望从组件2->组件3进行导航。要执行此操作，请执行以下步骤

在Comp_1组件中传递道具，如下所示

现在在Comp_2中，我们可以像这样从Comp_2->Comp_3导航

this.props.navigation.navigate（'Comp_3'）；

例如—

this.props.navigation.navigate（'Comp_3'））
标题='转到
const MyNavScreen = ({props}) =>

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

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

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

  </TouchableOpacity>