ネイティブベースドロワーが動作しません

Question

私は自分のネイティブのアプリケーションにドロワーを作成しようとしました。私は与えられた例に従ってきましたが、引き出しを開くためにまだ働いていません。以下は

は私のコードです：

#drawer.js 
 

 
export default class TalentDrawer extends Component { 
 
    closeDrawer =() => { 
 
    this.drawer._root.close() 
 
    }; 
 
    openDrawer =() => { 
 
    this.drawer._root.open() 
 
    }; 
 
    render() { 
 
    return (
 
     <Drawer 
 
     ref={(ref) => { this.drawer = ref; }} 
 
     content={<Sidebar/>} 
 
     panOpenMask={0.80} 
 
     onClose={this.closeDrawer.bind(this)} 
 
     onOpen={this.openDrawer.bind(this)} 
 
     captureGestures="open" 
 
     side="right" 
 
     > 
 
     <Dashboard openDrawer={this.openDrawer.bind(this)}/> 
 
     </Drawer> 
 
    ); 
 
    } 
 
}

#dashboard.js 
 
export default class Dashboard extends Component { 
 
    render() { 
 
    return (
 
     <View style={{flex:1, alignItems:'center', justifyContent: 'center'}}> 
 
      <Button onPress={()=>this.props.openDrawer()}> 
 
      <Text>Hello</Text> 
 
      </Button> 
 
     </View> 
 
    ); 
 
    } 
 
}

私も問題のために与えられた指示に従ってくださいGithub、まだこの引き出しは私のために働いて得ることができません。私と同じ問題を経験する人は誰ですか？ネイティブベースのWebサイトで与えられた例は、完全に動作する例を示していません。

Answer 1

あなたは

closeDrawer =() => { 
    this.refs.drawer.close() 
}; 
openDrawer =() => { 
    this.refs.drawer.open() 
}; 

Answer 2

dashboard.js状態を扱っていないので、我々は関数にクラスを変更することができます

、あなたのコード内のいくつかの変更を必要とする操作を行う必要があります。

drawer.js

export default class TalentDrawer extends Component { 
 
    closeDrawer =() => { 
 
    this.drawer._root.close() 
 
    }; 
 
    openDrawer =() => { 
 
    this.drawer._root.open() 
 
    }; 
 
    render() { 
 
    return (
 
     <Drawer 
 
     ref={(ref) => { this.drawer = ref; }} 
 
     content={<Sidebar/>} 
 
     panOpenMask={0.80} 
 
     onClose={this.closeDrawer} 
 
     onOpen={this.openDrawe} 
 
     captureGestures="open" 
 
     side="right" 
 
     > 
 
     <Dashboard openDrawer={this.openDrawer}/> 
 
     </Drawer> 
 
    ); 
 
    } 
 
}

dashboard.js

const Dashboard = (props) => { 
 
    return (
 
     <View style={{flex:1, alignItems:'center', justifyContent: 'center'}}> 
 
      <Button onPress={props.openDrawer}> 
 
      <Text>Hello</Text> 
 
      </Button> 
 
     </View> 
 
    ); 
 
    } 
 
}