反応ナビゲーションを働いていない、小道具は未定義

Question

である私が反応し、ネイティブでPOCアプリケーションを構築し、私は触れるハイライトをクリックしていたときに今すぐ反応し、ナビゲーションを

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

を実装しようとしています、関数が呼び出されますクリックすると、それがエラーを示しています

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

Answer 1

あなたはそれを試してみてください:)

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

これは助けることができるとすることができ、これを試してみてくださいあなた、クリックした内部

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

Answer 3

これはちょうど私に起こりました。トップレベルのコンポーネントだけがthis.props.navigationを取得します。

おそらくあなたは、このように、このコンポーネントを呼び出す必要があります：

<HomeScreen navigation=this.props.navigation />