Passing Requisiten für Knopf auf Pressetermin

Question

Ich habe eine Schublade (Reagieren-Navigation) in Routes.js erstellt und ich habe einen Button in HamburgerBtn.js. Ich möchte den Anruf auf dem Knopf aufrufen, um die Schublade mit meinem Knopf zu öffnen. Ich verstehe nicht, wie man das auch außerhalb von Routen in den Button bekommt.

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