프레스 이벤트에 버튼을 건네주는 도구 전달

Question

Routes.js에 서랍 (반응 탐색)을 만들었으며 HamburgerBtn.js에 Button이 있습니다. 내 버튼으로 서랍을 열려면 버튼에서 전화를 걸고 싶습니다. 나는 길 밖에서 버튼을 누르는 방법을 이해하지 못한다.

#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;