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

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

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 をエクスポートします。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • VSCodeはReact Native環境を構築します
  • 反応ネイティブソフトキーボードがポップアップして入力ボックスをブロックする問題を解決する
  • react-native WebViewの戻り処理の詳細説明(コールバック以外の方法も解決可能)
  • React-native bridge Androidネイティブ開発の詳細説明
  • React Native Flexboxレイアウトについての簡単な説明(要約)
  • React Native react-navigation ナビゲーションの使用法の詳細
  • ReactNativeにおけるFlatListの具体的な使い方
  • ReactNative FlatList の使い方と落とし穴パッケージの概要
  • React Nativeでシンプルなゲームエンジンを作る

<<:  MySQL FAQ シリーズ: 一時テーブルを使用する場合

>>:  同じ IP のアクセス頻度を制限するように nginx を設定する方法

推薦する

DockerにRabbitMQを素早くインストールする方法

1. 画像を取得する #Webコントロールページを含むバージョンを指定します docker pull...

CSS3で背景画像にカラーマスクを追加する方法

以前、開発中に背景レイヤーにカラーマスクを追加する必要のあるプロジェクトに遭遇しました。ここでは、背...

ウェブページ(ウェブサイト)のデザインと制作に関する考えや経験の共有

まずは投稿する前に! 「I Want to Study on My Own!」に改めて感謝します。た...

Alibaba Cloud Docker Yum ソースを使用した Docker 17.03.2 の CentOS7 オンラインインストールの詳細説明

参照ドキュメント公式 Docker インストール ドキュメント: https://docs.dock...

mysql binlog ログを正しくクリーンアップする 2 つの方法

mysqlはbinlogログを正しくクリーンアップします序文: MySQL の binlog はデー...

Docker 基本チュートリアル: Dockerfile 構文の詳細な説明

序文Dockerfile は Docker プログラムによって解釈されるスクリプトです。Docker...

CentOS 6.5 の設定 ssh キーフリーログインで pssh コマンドを実行する方法の説明

1. psshを確認してインストールします。yum list pssh 2. キーレスログインが設定...

js シンプルで粗雑なパブリッシュとサブスクライブのサンプルコード

パブリッシュ/サブスクライブとは何ですか?例を挙げてみましょう。あなたは服を買うために店に行きます。...

MySQLストアドプロシージャにおけるカーソル(DECLARE)の原理と使い方の詳細な説明

この記事では、例を使用して、MySQL ストアド プロシージャにおけるカーソル (DECLARE) ...

Reactでwindow.print()を使用した際にページが応答しなくなる問題の解決記録について

目次1. 問題の背景: 2. 問題の原因: 3. 問題解決:要約: 1. 問題の背景: window...

TypeScriptはvscodeを使用してコードのコンパイルプロセスを監視します

インストールtsコマンドをグローバルにインストールする npm install -g typescr...

MySQL 5.7.17 のインストールと設定方法のグラフィック チュートリアル (Windows)

1. ソフトウェアをダウンロードする1. MySQL の公式サイトにアクセスし、Oracle アカ...

11 の素晴らしい JavaScript コード リファクタリングのベスト プラクティスの概要

目次1. 関数の抽出2. 重複した条件付きスニペットを結合する3. 条件分岐文を関数に抽出する4. ...

VMware Workstation 15 Pro インストール ガイド (初心者向け)

01. VMware Workstation Pro 15 のダウンロードダウンロード: VMwa...

Windows Server 2016 で Flash を有効にする方法

最近、VMware Horizo​​n を導入してテストしましたが、そのコンソールにはデフォルトで ...