如何在React Native中实现滑动菜单

Question

我是React的新手。 我需要在React Native中开发滑动菜单。 我看了下面的链接，但那不是我想要的： http://www.reactnative.com/a-slide-menu-inspired-from-android-for-react-native/

实际上，我需要的是这里附加的图片。

请帮助我。

- SahanS

Answer 1

这个 React Native 的包相当全面，使用起来非常不错：

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

这只是我代码的一部分，你可以创建一个带有按钮的菜单栏，调用 openDrawer 方法，使用这个抽屉可以设置动画效果，以及在抽屉内包含一个滚动视图。希望这能帮到你！

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;

- Randy Song

---

我需要一个类似于这个网址 http://www.incredibleandros.com/slidingpanel-android-example/ 的IOS函数。 - SahanS

如何实现CustomeMenu、Toolbar和ContentView？请提供相关编程方案。 - SahanS

自定义菜单本质上只是一个滚动视图，工具栏只是占据屏幕顶部一部分的视图（或者您可以查看Android工具栏），而内容视图只是您想要显示在屏幕上的任何内容。 - Randy Song

是的，它可以工作，谢谢。现在我想添加顶部按钮。无论如何，谢谢。 - SahanS

还有一件事，当遮罩出现在屏幕上时，屏幕必须从左到右移动。这种方法能实现吗？ - SahanS

Answer 2

我已经添加了一个例子，它实现了react-native-router-flux组件到react-native-drawer。这样可以提供跨平台的简单脚手架。

- efkan

---

对于那些稍后到达的人，这个示例已经被弃用："弃用 - 这个存储库使用了过时版本的react-native-router-flux和react-native-drawer。" - jcollum

Answer 3

据我理解，您想使用“汉堡按钮”切换滑动菜单。

虽然 react-native-navigation-drawer 但是可以通过 SliderMenu 的 toogleSlideMenu 函数来实现。

一个简单的示例可能是：

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

- Julius Breckel

---

感谢您的回复。当我尝试这个时，它说：“无效目录/User/node_module/react-native-navigation-drawer”。我已经安装了react-native-navigation-drawer，但是那个消息还是出现了。 - SahanS

Answer 4

你可以在GitHub上查看这个完整的侧边栏项目。该项目包含了ToolbarAndroid、路由、DrawerLayoutAndroid、溢出菜单和其他组件。

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

- Pablo Darde