ios - 如何在 React Native 中实现 slider 菜单

Question

我是新手。我需要在 React-native 中开发 slider 菜单。我点击下面的链接，但这不是我想要的 http://www.reactnative.com/a-slide-menu-inspired-from-android-for-react-native/

实际上我需要附在此处的图片。

请帮帮我..

Answer 1

这个 React Native 包非常广泛，而且非常好用:

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

这只是我的代码片段，您可以创建一个菜单栏，其中包含一个调用 openDrawer 方法的按钮，并使用此抽屉，您可以将动画设置为您喜欢的样子，并在抽屉本身内包含一个 ScrollView .希望这对您有所帮助!

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;