Comment mettre en œuvre curseur menu à réagir Natif

Cette réagissent package natif est assez vaste, et vraiment agréable à utiliser:

https://github.com/root-two/react-native-drawer

C'est juste un extrait de mon code, vous pouvez créer une barre de menu avec un bouton qui appelle la openDrawer de la méthode et de l'utilisation de ce tiroir vous pouvez définir l'animation toutefois vous le souhaitez, et d'inclure un scrollview à l'intérieur du tiroir lui-même. Espérons que cette aide!

var React = require('react-native');
var {
StyleSheet,
Component,
View,
Text,
Navigator,
TouchableHighlight,
TouchableOpacity,
} = React;
var styles = require('./styles');
var Drawer = require('react-native-drawer')
var drawerStyles = {
drawer: {
shadowColor: "#000000",
shadowOpacity: 0.8,
shadowRadius: 0,
}
}
var MainPage = React.createClass({
getInitialState: function(){
return {
drawerType: 'overlay',
openDrawerOffset:.3,
closedDrawerOffset:0,
panOpenMask: .1,
panCloseMask: .9,
relativeDrag: false,
panStartCompensation: true,
openDrawerThreshold: .25,
tweenHandlerOn: false,
tweenDuration: 550,
tweenEasing: 'easeInOutQuad',
disabled: false,
tweenHandlerPreset: null,
acceptDoubleTap: true,
acceptTap: true,
acceptPan: true,
rightSide: false,
showView: true,
}
},
setDrawerType: function(type){
this.setState({
drawerType: type
});
},
openDrawer: function(){
this.refs.drawer.open();
},
closeDrawer: function(){
this.refs.drawer.close();
},
setStateFrag: function(frag){
this.setState(frag);
},
render: function() {
var menu = <Menu 
closeDrawer={this.closeDrawer}
navigator={this.props.navigator}  />;
return (
<Drawer
ref="drawer"
onClose={this.onClose}
type={this.state.drawerType}
animation={this.state.animation}
openDrawerOffset={this.state.openDrawerOffset}
closedDrawerOffset={this.state.closedDrawerOffset}
panOpenMask={this.state.panOpenMask}
panCloseMask={this.state.panCloseMask}
relativeDrag={this.state.relativeDrag}
panStartCompensation={this.state.panStartCompensation}
openDrawerThreshold={this.state.openDrawerThreshold}
content={**YOURCUSTOMENU**}
styles={drawerStyles}
disabled={this.state.disabled}
tweenHandler={this.tweenHandler}
tweenDuration={this.state.tweenDuration}
tweenEasing={this.state.tweenEasing}
acceptDoubleTap={this.state.acceptDoubleTap}
acceptTap={this.state.acceptTap}
acceptPan={this.state.acceptPan}
changeVal={this.state.changeVal}
negotiatePan={false}
side={this.state.rightSide ? 'right' : 'left'}
>
<View>
<**YOURTOOLBAR** onPress={this.openDrawer}/> 
<**YOURCONTENT_VIEW**/>
</View>
</Drawer>
);
},
});
module.exports = MainPage;

De ce que je comprends, vous voulez bascule le curseur de menu avec les hamburger button.

Bien que réagir-native-navigation-tiroir

Qui peut être atteint avec la toogleSlideMenu fonction de la SliderMenu.

Un exemple simple pourrait être:

import React, {
View,
Text,
ScrollView,
} from 'react-native';
import SlideMenu from 'react-native-navigation-drawer';
var BasicExample = React.createClass({
render() {
return (
<View style={styles.container}>
<View>
<Text onPress={() => this._slideMenu.toogleSlideMenu()}> Your status bar </Text>
</View>
<SlideMenu
ref={(c) => this._slideMenu = c}
menu={<Menu />} 
>
<View>
<Text>Your content</Text>
</View>
</SlideMenu>
</View>
);
}
});
var Menu = React.createClass({
render() {
return (
<View style={styles.container}>
<ScrollView
contentContainerStyle={styles.contentContainer}
style={styles.scrollView}>
<Text>Gallery</Text>
<Text>Latest</Text>
<Text>Events</Text>
<Text>Update</Text>
</ScrollView>
</View>
);
}
});