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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL FAQ シリーズ: 一時テーブルを使用する場合
>>: 同じ IP のアクセス頻度を制限するように nginx を設定する方法
1. デザインの方向性を明確にする<br />まず、どのユーザーを対象にデザインするのか...
1. メニューバーで「編集」→「仮想ネットワーク エディター」を選択して仮想ネットワーク エディタ...
この記事では、動的な点と線の効果を実現するためのJavaScriptキャンバスの具体的なコードを参考...
今日は、JavaScript を使用して Web ページ上にプレーヤーを作成する方法を紹介します。誰...
目次01 Kubernetes とは何ですか? 02 KubernetesとCompost+Swar...
問題コードuseEffectによって発生したクロージャの問題コードを見てみましょう 定数 btn =...
1. pom.xmlに次の依存関係を追加します。 <依存関係> <groupId&...
この記事では、クリック時にサブメニューを表示するためのJavaScriptの具体的なコードを参考まで...
目次繰り返しレンダリングループを避ける副作用の除去についてReact16.8 の新しい useEff...
ステップ準備した静的リソースファイルを指定されたフォルダに配置しますnginx 設定ファイルを変更す...
以前、プロジェクトを開発しました。バックエンドのインターフェースを書くために Flask フレームワ...
[mysql] replace の使用方法 (フィールドの内容の一部を置き換える) [mysql]...
目次1. はじめに1.1 原則1.2 プロセス1.3 特徴1.4 githubアドレス2. テスト環...
今日は、Taobao、JD.comなどのショッピングモールでよく使われている、小さな画像の上にマウス...
この記事の例では、右上隅の時間表示のリアルタイム更新を実現するためのVueの具体的なコードを紹介しま...