如何将<View/>滑入和滑出React Native的底部？

Question

在React Native iOS中，我想滑入和滑出以下图片。

在下面的例子中，当按下按钮时，从底部弹出Payment Information视图，当按下折叠按钮时，它会回落并消失。

什么是正确和正确的方式去做呢？

预先感谢您！

编辑

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的组件。它的工作非常棒。你的反应本地根目录sudo npm install rn-sliding-out-panel --save：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安装。

---

我希望它可以帮助别人：d