React Nativeはモニタリングジェスチャーの上下プル効果を実現します

'react-native' から {PanResponder} をインポートします。


var Dimensions = require('Dimensions');
const deviceHeight = Dimensions.get("window").height;
const deviceWidth = Dimensions.get("window").width;

クラスTaskfinishedPageはComponentを拡張します{
  コンストラクタ(props) {
    スーパー(小道具);
    コンソールでYellowBoxを無効にするには、trueを選択します。
    この状態 = {
      シルダーマージン: デバイス高さ-230、
    };
      this.lastY1 = this.state.silderMargin;
  }
 
  コンポーネントマウント() {

    this._panResponder = PanResponder.create({
      onStartShouldSetPanResponder:(evt, ジェスチャー状態) => {
          true を返します。
      },
      onMoveShouldSetPanResponder: (evt, ジェスチャー状態) => {
          true を返します。
      },
      onPanResponderGrant: (イベント、ジェスチャー状態) => {
          this._highlight();
      },
      onPanResponderMove: (イベント、ジェスチャー状態) => {
          コンソールにログを記録します(`gestureState.dx: ${gestureState.dx} ジェスチャーステート.dy: ${gestureState.dy}`);
          （50 < this.lastY1 + ジェスチャーステート.dy && this.lastY1 + ジェスチャーステート.dy < デバイスの高さ - 230）{
             this.setState({
              // marginLeft1: this.lastX1 + ジェスチャーステート.dx,
              シルダーマージン: this.lastY1 + ジェスチャーステート.dy、
          });
          }
         
      },
      onPanResponderRelease: (evt, ジェスチャー状態) => {
          this._unhighlight();
        
          this.lastY1 = this.state.silderMargin;
      },
      onPanResponderTerminate: (evt, ジェスチャー状態) => {
      },
  });
  }


//これら 2 つのメソッドは、手が触れたときと離れたときにトリガーされます。
  _ハイライト解除(){
    this.setState({
        スライダー背景色: '透明'、
    });
}

_ハイライト(){
    this.setState({
        スライダー背景色: '透明'、
    });
}


 与える（） {
    戻る （
      <コンテナ}>

        <ヘッダー>
          <左>
            <ボタンを透明にする onPress={() => {    
                ナビゲーションユーティリティをリセットして戻る(this.props.navigation);
            }}>
              <アイコン名='arrow-back' スタイル={{color:'#000'}}/>
            </ボタン>
          </左>
          <本文>
          <Text style={{color:'#000'}}>完了したミッションの詳細</Text>
          </本文>
          <右 />
        </ヘッダー>
        <View style={{ flex: 1 }}>
          <表示スタイル={
                [スタイル.パネルビュー、
                {
                    背景色: this.state.sliderBackgroundcolor、
                    marginTop: this.state.silderMargin、
                    zインデックス:100
                
                }
                ]}
                  {...this._panResponder.panHandlers}
          >
       
            
          </表示>
          
 
          </表示>
      </コンテナ>
    );
    }


定数スタイル = {
  パネルビュー: {
    幅: デバイス幅-20、
    高さ: 410,
    マージン左:10,
    マージン右:10,
    境界半径:6,  
 }
}

デフォルトの TaskfinishedPage をエクスポートします。