Comment slide <Afficher/> à partir et vers le bas à Réagir Natif?

À Réagir Natif iOS, je tiens à glisser dans et hors d'une comme à la suite dans l'image.

Dans l'exemple suivant, lorsqu'un bouton est enfoncé, le Payment Information affichage de pop-up à partir du bas et quand l'effondrement bouton est pressé, il remonte vers le bas et disparaît.

Quelle serait la bonne et la bonne façon de faire?

Comment slide <Afficher/> à partir et vers le bas à Réagir Natif?

Vous en remercie d'avance!

MODIFIER

Comment slide <Afficher/> à partir et vers le bas à Réagir Natif?

Êtes-vous à l'aide de flex ou le positionnement absolu pour le paiement de la vue?

OriginalL'auteur Jo Ko | 2016-08-24

  1. 20

    Fondamentalement, vous avez besoin d'absolu, la position de votre point de vue à la partie inférieure de l'écran. Alors vous traduire sa valeur y à égale à sa hauteur. (La sous-vue doit avoir une hauteur spécifique afin de savoir de combien le déplacer)

    Voici une aire de jeux montrer 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);
    Merci!!!! allez essayer un peu
    Il fonctionne merci beaucoup! Encore une question, l'une qu'il arrive, il va afficher un bouton, et une fois que c'est cliqué, je veux le même sous-vue à venir. Comment puis-je aller sur le faire? Merci!!!!
    c'est aussi simple que l'ajout d'un nouveau bouton avec onpress mappé à une nouvelle fonction.
    Fait la tentative et la nouvelle/second sous-vue glisse vers le haut à partir du bas, mais augmente trop (mise à Jour le post original avec une capture d'écran. Le rose, c'est la deuxième sous-vue et le noir est le premier sous-vue, comme l'a montré légèrement au bas). Il s'avère que cela a à voir avec container style de ne pas avoir alignItems: 'center. Est-il possible de le faire correctement, avec elle étant apposés sur le fond (Comme le premier sous-vue) quand il glisse vers le haut à partir du bas, sans alignItems: 'center'? Parce que, le contenu de la deuxième subview tout est aligné sur le centre et je ne le souhaite pas.
    Juste vérifier pour voir si vous avez vu mon commentaire précédent. S'il vous plaît laissez-nous savoir.

    OriginalL'auteur Ahmad Al Haddad

  2. 4

    Je sais que c'est un peu en retard, mais pensé qu'il pourrait être utile pour quelqu'un. Vous devriez essayer un composant appelé rn-sliding-out-panel. Il fonctionne de manière impressionante. 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éagissent-native répertoire racine.

    J'espère que cela aide quelqu'un 😀

    OriginalL'auteur edvilme