web-dev-qa-db-fra.com

Comment implémenter le menu de curseur dans réagit natif

Je suis nouveau pour réagir . Je dois développer un menu de curseur dans React-native . Je suis un lien ci-dessous mais ce n’est pas ce que je veux http://www.reactnative.com/a -slide-menu-inspiré-de-Android-pour-réagir-natif/

En fait, j'ai besoin d'une image que j'ai jointe ici.

enter image description here

Aidez-moi, s'il vous plaît..

iosfacebookreactjsreact-native
11
SahanS

Ce paquet natif de réaction est très volumineux et vraiment agréable à utiliser:

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

Ceci est juste un extrait de mon code, vous pouvez créer une barre de menus avec un bouton qui appelle la méthode openDrawer. En utilisant ce tiroir, vous pouvez définir l’animation comme vous le souhaitez et inclure une vue à défilement dans le tiroir même. J'espère que cela t'aides!

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;
11
Randy Song

J'ai ajouté un exemple que implémente le composant réact-native-router-flux dans react-native-tiroir . De cette façon, il présente un échafaudage facile comme multi-plateforme.

 enter image description here

7
efkan

De ce que je comprends, vous voulez toogle le menu du curseur avec le hamburger button.

Bien que react-native-navigation-tiroir

Cela peut être réalisé avec la fonction toogleSlideMenu de 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>
    );
  }
});
1
Julius Breckel

Vous pouvez vérifier ce projet complet sidemenu sur github. Ce projet contient ToolbarAndroid, routes, DrawerLayoutAndroid, un menu déroulant et d’autres composants.

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

0
Pablo Darde