プレスイベントのボタンを渡すための小道具

Question

Routes.jsに引き出し（反応ナビゲーション）を作成しましたが、HamburgerBtn.jsのボタンがあります。私は自分のボタンで引き出しを開くためにボタン上の呼び出しを呼び出すと思います。私はこれをルートの外からボタンにも伝える方法を理解していません。

#HamburgerBtn.js;import Hamburger from 'react-native-hamburger'; 
import React, {Component} from 'react'; 
import styles from './Component.style'; 
import { 
    Text, 
    View 
} from 'react-native'; 
import {DrawerNavigator} from 'react-navigation'; 
import {NavigationActions} from 'react-navigation'; 

class HamburgerBtn extends Component { 
    constructor(props){ 
    super(props); 
    this.state = { 
     active: false, 
    } 
    } 
    openControlPanel =() => { 
     this.props.navigation.navigate('DrawerOpen'); // open drawer 
    }; 
    render() { 
    //onPress={()=> {this.setState({active: !this.state.active});this.props.navigation.navigate('DrawerOpen');}}/> 
    return (
     <View style={styles.hamburgerBtnHome}> 
     <Hamburger active={this.state.active} 
     type = "arrow" 
     color = "black" 
     onPress={()=> {this.props.openControlPanel()}} 
     /> 
     </View> 
    ); 
    } 
} 

export default HamburgerBtn; 

--routes.js--

import Connect from './Connect/Connect'; 
import Setup from './Setup/Setup'; 
import Update from './Update/Update'; 
import homePage from './homePage' 
import SideMenu from './SideMenu/SideMenu'; 
import {DrawerNavigator} from 'react-navigation'; 

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

export default DrawerNavigator({ 
    homePage: { 
    screen: homePage 
    }, 
    Connect: { 
    screen: Connect 
    }, 
    Setup: { 
    screen: Setup 
    }, 
    Update: { 
    screen: Update 
    } 
}, { 
    contentComponent: SideMenu, 
    drawerWidth: 300 
}); 

--homepage.js--

import React, {Component} from 'react'; 
import { 
    Text, 
    View 
} from 'react-native'; 
import Hamburger from './Components/HamburgerBtn'; 

class homePage extends Component { 
    render() { 
    return (
     <View style={{padding: 50}}> 
     <Hamburger/> 
     <Text> 
      HomePage 
     </Text> 
     </View> 
    ); 
    } 
} 

export default homePage; 

Answer 1

--hamburger--

import Hamburger from 'react-native-hamburger'; 
import React, {Component} from 'react'; 
import styles from './Component.style'; 
import { 
    Text, 
    View 
} from 'react-native'; 
import PropTypes from 'prop-types'; 
import {NavigationActions} from 'react-navigation'; 

class HamburgerBtn extends Component { 
    constructor(props){ 
    super(props); 
    this.state = { 
     active: false, 
    } 
    } 
    onPress =() => { 
    this.setState({active: !this.state.active}); 
    this.props.onPress(); 
    }; 
    render() { 
    //onPress={()=> {this.setState({active: !this.state.active});this.props.navigation.navigate('DrawerOpen');}}/> 
    return (
     <View style={styles.hamburgerBtnHome}> 
     <Hamburger active={this.state.active} 
     type = "arrow" 
     color = "black" 
     onPress={() => this.onPress()} 
     /> 
     </View> 
    ); 
    } 
} 

export default HamburgerBtn; 

--homepage -

import React, {Component} from 'react'; 
import { 
    Text, 
    View 
} from 'react-native'; 
import Hamburger from './Components/HamburgerBtn'; 

class homePage extends Component { 
    openControlPanel =() => { 
     this.props.navigation.navigate('DrawerOpen'); // open drawer 
    }; 
    render() { 
    return (
     <View style={{padding: 50}}> 
     <Hamburger onPress={() => this.openControlPanel()} /> 
     <Text> 
      HomePage 
     </Text> 
     </View> 
    ); 
    } 
} 

export default homePage;