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. 画像を取得する #Webコントロールページを含むバージョンを指定します docker pull...
以前、開発中に背景レイヤーにカラーマスクを追加する必要のあるプロジェクトに遭遇しました。ここでは、背...
まずは投稿する前に! 「I Want to Study on My Own!」に改めて感謝します。た...
参照ドキュメント公式 Docker インストール ドキュメント: https://docs.dock...
mysqlはbinlogログを正しくクリーンアップします序文: MySQL の binlog はデー...
序文Dockerfile は Docker プログラムによって解釈されるスクリプトです。Docker...
1. psshを確認してインストールします。yum list pssh 2. キーレスログインが設定...
パブリッシュ/サブスクライブとは何ですか?例を挙げてみましょう。あなたは服を買うために店に行きます。...
この記事では、例を使用して、MySQL ストアド プロシージャにおけるカーソル (DECLARE) ...
目次1. 問題の背景: 2. 問題の原因: 3. 問題解決:要約: 1. 問題の背景: window...
インストールtsコマンドをグローバルにインストールする npm install -g typescr...
1. ソフトウェアをダウンロードする1. MySQL の公式サイトにアクセスし、Oracle アカ...
目次1. 関数の抽出2. 重複した条件付きスニペットを結合する3. 条件分岐文を関数に抽出する4. ...
01. VMware Workstation Pro 15 のダウンロードダウンロード: VMwa...
最近、VMware Horizon を導入してテストしましたが、そのコンソールにはデフォルトで ...