在React本機應用程序中實施抽屜

Question

我剛剛在我的React本機應用程序中創建了我的第一個界面。我創建了一個導航欄，其中有一個菜單按鈕可以點擊，因此抽屜打開，我可以從一個屏幕導航到另一個屏幕。我打算用這個https://github.com/root-two/react-native-drawer。 我知道我需要調用的時候點擊這裏是我使用的代碼的菜單按鈕打開的抽屜，顯示一個警告現在

openDrawer(){ 
     this.drawer.open() 
    } 

    render() { 
     return (
      <Container> 
       <Navbar 
        bgColor={'#C0C0C0'} 
        title={"Det globale flyktningbildet"} 
        titleColor="white" 
        left={{ 
         icon: "ios-menu", 
         iconColor: "#FFFFFF", 
         // onPress:() => {alert('Toggle menu ')} 
         onPress:() => {this.props.openDrawer} 
        }} 
       /> 

       <Drawer 
        type="static" 
        // content={<ControlPanel />} 
        openDrawerOffset={100} 
        styles={{main: {shadowColor: "#000000", shadowOpacity: 0.4, shadowRadius: 3}}} 
        tweenHandler={Drawer.tweenPresets.parallax}> 
       </Drawer> 
       <View> 
        <Image 
         source = { require('./../images/image1_2.png')} 
         style={[styles.image1, {resizeMode: 'contain'}]} 
        /> 
       </View> 
      </Container> 
     ); 
    } 

所以，可以請你幫我implemet抽屜，不同屏幕之間導航

Answer 1

在github上轉到通過示例代碼，你會得到的想法，或者你可以參考https://stackoverflow.com/a/42748086/6423570

編輯

你應該換屏幕的根容器與Drawer組件。 <ControlPanel />組件是應在抽屜中顯示的內容。您可以使用<ControlPanel />中的Touchable組件和導航器在屏幕之間導航。而openDrawer功能不是一個道具，稱呼其爲this.openDrawer

render() { 
    return (
    <Drawer 
     type="static" 
    // content={<ControlPanel />} 
     openDrawerOffset={100} 
     styles={{ 
     main: { 
     shadowColor: "#000000", 
     shadowOpacity: 0.4, 
     shadowRadius: 3 
     } 
     }} 
     tweenHandler={Drawer.tweenPresets.parallax} 
    > 
    <Container> 
     <Navbar 
     bgColor={'#C0C0C0'} 
     title={"Det globale flyktningbildet"} 
     titleColor="white" 
     left={{ 
      icon: "ios-menu", 
      iconColor: "#FFFFFF", 
      // onPress:() => {alert('Toggle menu ')} 
      onPress:() => {this.openDrawer} 
     }} 
     /> 
     <View> 
     <Image 
      source = { require('./../images/image1_2.png')} 
      style={[styles.image1, {resizeMode: 'contain'}]} 
     /> 
     </View> 
    </Container> 
    </Drawer> 
); 
}