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 を設定する方法

推薦する

ウェブページエクスペリエンス: 計画と設計

1. デザインの方向性を明確にする<br />まず、どのユーザーを対象にデザインするのか...

VMware 仮想マシンに固定 IP アドレスを設定する方法 (グラフィック チュートリアル)

1. メニューバーで「編集」→「仮想ネットワーク エディター」を選択して仮想ネットワーク エディタ...

JavaScript キャンバスで動的な点と線の効果を実現

この記事では、動的な点と線の効果を実現するためのJavaScriptキャンバスの具体的なコードを参考...

JavaScript でウェブ プレーヤーを実装する

今日は、JavaScript を使用して Web ページ上にプレーヤーを作成する方法を紹介します。誰...

クラウドネイティブテクノロジー Kubernetes (K8S) の紹介

目次01 Kubernetes とは何ですか? 02 KubernetesとCompost+Swar...

ReactのuseEffectクロージャの落とし穴についての簡単な説明

問題コードuseEffectによって発生したクロージャの問題コードを見てみましょう 定数 btn =...

IDEA Maven プロジェクトで Tomcat をデバッグ モードで実行する詳細なチュートリアル

1. pom.xmlに次の依存関係を追加します。 <依存関係> <groupId&...

サブメニューをクリックする効果を実現するJavaScript

この記事では、クリック時にサブメニューを表示するためのJavaScriptの具体的なコードを参考まで...

React useEffect の理解と使用

目次繰り返しレンダリングループを避ける副作用の除去についてReact16.8 の新しい useEff...

nginxで静的リソースを公開する方法

ステップ準備した静的リソースファイルを指定されたフォルダに配置しますnginx 設定ファイルを変更す...

Flask と Vue のフロントエンドとバックエンドを分離したプロジェクト展開のサンプル コード

以前、プロジェクトを開発しました。バックエンドのインターフェースを書くために Flask フレームワ...

mysql はフィールドコンテンツの一部を置き換え、mysql は関数 replace() を置き換えます。

[mysql] replace の使用方法 (フィールドの内容の一部を置き換える) [mysql]...

MySQL オンライン DDL ツール gh-ost 原理分析

目次1. はじめに1.1 原則1.2 プロセス1.3 特徴1.4 githubアドレス2. テスト環...

CSS を使用して小さな画像をプルダウンし、大きな画像と情報を表示する方法

今日は、Taobao、JD.comなどのショッピングモールでよく使われている、小さな画像の上にマウス...

Vueは右上隅の時間表示のリアルタイム更新を実装します

この記事の例では、右上隅の時間表示のリアルタイム更新を実現するためのVueの具体的なコードを紹介しま...