reagieren-Navigation nicht funktioniert, ist Requisiten undefined

Question

Ich baue eine POC-Anwendung in reagieren-native und versuchen zu implementieren reagieren Navigations

import {StackNavigator, DrawerNavigator} from 'react-navigation'; 

export default class HomeScreen extends React.Component { 
    constructor(props) { 
     super(props) 
     this.clicked = this.clicked.bind(this) 
    } 

    static navigationOptions = { 
     drawerLabel: 'Home', 
    }; 

    clicked =()=> { 
     this.props.navigator.navigate('DrawerOpen'); // open drawer 
    } 

    render() { 
     // const {navigate} = this.props.navigation; 
     return (
      <ScrollView> 
       <View style={styles.container}> 

        <View style={styles.header}> 
         <View style={{width: 50}}> 
          <TouchableHighlight onPress={()=> { 
           this.clicked("DrawerOpen") 
          }}> 
           <Image source={require('./img/hamburger_icon.png')}/> 
          </TouchableHighlight> 
         </View> 
        </View> 
       </View> 
      </ScrollView > 
     ) 
    } 
} 

Nun, wenn ich auf berührbaren Highlight am klicken, wird geklickt Funktion aufgerufen und es zeigt Fehler:

undefined is not an object (evaluating '_this.props.navigator.navigate') 
clicked 

Answer 1

Sie versuchen, es :)

import {StackNavigator, DrawerNavigator} from 'react-navigation'; 

    export default class HomeScreen extends React.Component { 

     static navigationOptions = { 
      drawerLabel: 'Home', 
     }; 

     clicked =() => { 
      this.props.navigation.navigate('DrawerOpen'); // open drawer 
     } 

     render() { 
      // const {navigate} = this.props.navigation; 
      return (
       <ScrollView> 
        <View style={styles.container}> 

         <View style={styles.header}> 
          <View style={{width: 50}}> 
           <TouchableHighlight onPress={()=> 
            this.clicked() 
           }> 
            <Image source={require('./img/hamburger_icon.png')}/> 
           </TouchableHighlight> 
          </View> 
         </View> 
        </View> 
       </ScrollView > 
      ) 
     } 
    } 

Answer 2

Try this, das helfen kann, sein kann, Sie, innerhalb der geklickt

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

Answer 3

Das ist mir gerade passiert. Nur die Top-Level-Komponenten erhalten die this.props.navigation.

Wahrscheinlich müssen Sie diese diese Komponente wie nennen:

<HomeScreen navigation=this.props.navigation />