web-dev-qa-db-ja.com

<View />を下からReact Native？

In React Native iOSでは、写真をフォローするようにスライドインおよびスライドアウトしたいと思います。

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

そうするための正しい適切な方法は何でしょうか？

enter image description here

前もって感謝します！

[〜＃〜] edit [〜＃〜]

enter image description here

javascriptreactjsreact-nativereduxreact-jsx
14
Jo Ko

基本的に、画面の下部にビューを絶対配置する必要があります。次に、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);
24
Ahmad Al Haddad

私はそれが少し遅れていることを知っていますが、誰かに役立つかもしれないと思った。 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を介して、react-nativeルートディレクトリにインストールできます。

私はそれが誰かを助けることを願っています：D

6
edvilme