Jak zaimplementować menu suwaków w reakcji Native

Question

Jestem nowy, aby zareagować. Potrzebuję rozwijać menu suwaków w języku natywnym z react. Podążam za poniższym linkiem, ale to nie jest mi potrzebne http://www.reactnative.com/a-slide-menu-inspired-from-android-for-react-native/

W rzeczywistości potrzebuję obrazu, który tutaj załączam.

Proszę mi pomóc ..

Answer 1

Ten reagować pakiet rodzimy jest dość obszerny i bardzo miły w użyciu:

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

To jest tylko fragment mojego kodu, ty może utworzyć pasek menu za pomocą przycisku wywołującego metodę openDrawer, a za pomocą tej szuflady można ustawić animację tak, jak lubisz i dołączyć widok przewijania do samej szuflady. Mam nadzieję że to pomoże!

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; 

Answer 2

Z tego co rozumiem, chcesz toogle menu suwak z hamburger button.

Chociaż react-native-navigation-drawer

który można osiągnąć za pomocą funkcji toogleSlideMenu z SliderMenu.

Prostym przykładem może być:

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> 
    ); 
    } 
}); 

Answer 3

Dodałem an example że implements react-native-router-flux komponent do react-native-drawer. W ten sposób przedstawia łatwe rusztowanie jako platformę wieloplatformową.

Answer 4

Można sprawdzić to kompletny projekt sidemenu na github. Ten projekt zawiera ToolbarAndroid, trasy, DrawerLayoutAndroid, menu przepełnienia i inne komponenty.

https://github.com/darde/react-native-sidemenu