入门未定义不是对象评估_this.props.navigation

我使用DrawerNavigator，我有3页：Router page，mainScreen和photos page，
我maked头导航栏区域，我用这<TouchableHighlight onPress={() => this.props.navigation.navigate('DrawerOpen')}>打开抽屉菜单在mainScreen中，也用于照片页面，菜单在mainScreen中可以，但是当我在照片页面中点击<TouchableHighlight onPress={() => this.props.navigation.navigate('DrawerOpen')}>时，出现此错误：
我该如何解决这个问题？入门未定义不是对象评估_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;

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> 

     ) 
    } 
}

来源

2017-07-20 Sedric Heidarizarei

嗯，我认为这很明显，你不包括照片页面中的所有内容。请使用这两个文件中的所有代码更新您的代码，以便查看缺少的内容。 – wuno

这是我的所有代码，没有我的风格，我从''传递了我的照片页面，我可以在照片页面看到照片文字和后退按钮，但是如果您需要？ –

也许我忽视的东西，但它只是看起来像一个简单的JavaScript错误。你破坏你的纯组分MyNavScreen你的道具：

const MyNavScreen = ({ navigation }) => (

这意味着你不必this.props访问。您只需访问解构的道具navigation。因此，对于不确定的错误的原因，因为这真的是不明确的：

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

如果你改变它，而不是直接使用navigation，它应该工作：

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

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

如果这对您造成麻烦，您应该刷上destructing。

来源

2017-07-21 01:05:47

谢谢亲爱的@ michael-cheng，Solved.and方式更好？我的代码是okey？我能继续吗？或者我应该改变为reder（）模式并添加this.props？ –

@SedricHeidarizarei我认为**解构**没有“更好的方法”。它只是一个帮助使代码更具可读性的工具。你是否使用它取决于你的风格和你的团队的风格。这是*我的意见*虽然，我当然不是Javascript的专家，所以请一言以蔽之。 –

@SedricHeidarizarei至于**纯粹的组件**，有充分的理由使用它们。网上有很多关于何时以及如何最好地使用它们的文章。我建议花一些时间阅读它们，因为它会让您更好地理解React以及如何构建代码。甚至有[StackOverflow涉及这个主题的问题]（https://stackoverflow.com/questions/40703675/react-functional-stateless-component-purecomponent-component-what-are-the-dif）进入更多的细微差别。例如，你的'照片页面'具体是一个**功能无状态组件**。 –

如果您在子元素使用TouchableOpacity /高度，它传递this.props.onPress这样的：

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

然后调用onPress功能在你的父组件是这样的：

<Parent onPress={this.Handlepress} />

来源

2018-02-03 15:19:45

入门未定义不是对象评估_this.props.navigation

回答

相关问题