入門未定義不是對象評估_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

回答

相關問題