React Nativeの下部から<View/>を出し入れするには？

Question

ReactネイティブのiOSでは、私は写真の中でフォローするようにスライドしたいと思います。

次の例では、ボタンを押すと、Payment Informationビューが下からポップアップし、折りたたみボタンを押すと元に戻り、消えます。

これを行うには適切かつ適切な方法はありますか？

事前にありがとうございます！

EDIT

Answer 1

基本的に、あなたは絶対的な位置に画面の下部に表示を必要とします。次にy値をその高さと同じに変換します。 がhttps://rnplay.org/apps/n9Gxfg

コード：：私は知っている

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

Answer 2

はそれが

はここで結果を示す遊び場だ（サブビューには、それを動かすためにどのくらい知っているために特定の高さを持っている必要があります）少し遅れましたが、それが誰かにとって役に立つかもしれないと考えました。 rn-sliding-out-panelというコンポーネントを試す必要があります。それはすごくうまくいく。 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> 

そしてあなたも、外部のボタンから開くことができます：

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

あなたはNPM経由でインストールすることができます：あなたの反応ネイティブルートディレクトリにsudo npm install rn-sliding-out-panel --save。

---

私はそれが誰かの役に立てば幸い：お支払いビューのフレックスまたは絶対位置をD