web-dev-qa-db-fra.com

Comment faire glisser <View /> vers et depuis le bas dans React Native?

Dans React iOS natif, je voudrais glisser vers l'intérieur et vers l'extérieur comme sur l'image ci-dessous.

Dans l'exemple suivant, lorsqu'un bouton est enfoncé, le Payment Information la vue apparaît par le bas et lorsque le bouton de réduction est enfoncé, il redescend et disparaît.

Quelle serait la manière correcte et appropriée de procéder?

enter image description here

Merci d'avance!

[~ # ~] modifier [~ # ~]

enter image description here

javascriptreactjsreact-nativereduxreact-jsx
14
Jo Ko

Fondamentalement, vous devez positionner votre vue en absolu au bas de l'écran. Ensuite, vous traduisez sa valeur y pour égaler sa hauteur. (La vue secondaire doit avoir une hauteur spécifique afin de savoir à quel point la déplacer)

Voici un terrain de jeu montrant le résultat: https://rnplay.org/apps/n9Gxfg

Code:

'use strict';

import React, {Component} from 'react';
import ReactNative from 'react-native';

const {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableHighlight,
  Animated
} = ReactNative;


var isHidden = true;

class AppContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      bounceValue: new Animated.Value(100),  //This is the initial position of the subview
      buttonText: "Show Subview"
    };
  }


  _toggleSubview() {    
    this.setState({
      buttonText: !isHidden ? "Show Subview" : "Hide Subview"
    });

    var toValue = 100;

    if(isHidden) {
      toValue = 0;
    }

    //This will animate the transalteY of the subview between 0 & 100 depending on its current state
    //100 comes from the style below, which is the height of the subview.
    Animated.spring(
      this.state.bounceValue,
      {
        toValue: toValue,
        velocity: 3,
        tension: 2,
        friction: 8,
      }
    ).start();

    isHidden = !isHidden;
  }

  render() {
    return (
      <View style={styles.container}>
          <TouchableHighlight style={styles.button} onPress={()=> {this._toggleSubview()}}>
            <Text style={styles.buttonText}>{this.state.buttonText}</Text>
          </TouchableHighlight>
          <Animated.View
            style={[styles.subView,
              {transform: [{translateY: this.state.bounceValue}]}]}
          >
            <Text>This is a sub view</Text>
          </Animated.View>
      </View>
    );
  }
}

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    marginTop: 66
  },
  button: {
    padding: 8,
  },
  buttonText: {
    fontSize: 17,
    color: "#007AFF"
  },
  subView: {
    position: "absolute",
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: "#FFFFFF",
    height: 100,
  }
});

AppRegistry.registerComponent('AppContainer', () => AppContainer);
24
Ahmad Al Haddad

Je sais que c'est un peu tard, mais j'ai pensé que cela pourrait être utile pour quelqu'un. Vous devriez essayer un composant appelé rn-sliding-out-panel. Cela fonctionne très bien. https://github.com/octopitus/rn-sliding-up-panel

<SlidingUpPanel
    draggableRange={top: 1000, bottom: 0}
    showBackdrop={true|false /*For making it modal-like*/}
    ref={c => this._panel = c}
    visible={ture|false /*If you want it to be visible on load*/}
></SlidingUpPanel>

Et vous pouvez même l'ouvrir à partir d'un bouton externe:

<Button onPress={()=>{this._panel.transitionTo(1000)}} title='Expand'></Button>

Vous pouvez l'installer via npm: Sudo npm install rn-sliding-out-panel --save sur votre répertoire racine natif de react.

J'espère que ça aide quelqu'un: D

6
edvilme