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

在React Native iOS中，我想滑入和滑出以下圖片。如何將<View/>滑入和滑出React Native的底部？

在下面的例子中，當按下按鈕時，從底部彈出Payment Information視圖，當按下摺疊按鈕時，它會回落並消失。

什麼是正確和正確的方式去做呢？

預先感謝您！

編輯

來源

2016-08-24 Jo Ko

你使用Flex或絕對定位用於支付看法？ –

基本上，你需要絕對位置視圖屏幕的底部。然後你將它的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);

來源

2016-08-24 11:22:12

謝謝！將嘗試一下 –

它的作品非常感謝你！還有一個問題，它出現它會顯示一個按鈕，一旦點擊，我想同一個子視圖出現。我怎麼能這樣做呢？謝謝！ –

@JoKo就像使用onpress添加一個新按鈕映射到一個新函數一樣簡單。 –

我知道這是一個晚了一點，但認爲它可能對某人有用。您應該嘗試一個名爲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

來源

2017-12-12 21:13:47 edvilme

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

回答

相關問題