問題タブ [react-native-scrollview]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
1 に答える
4633 参照

styling - React-Native スタイルのスティッキー ヘッダー

短い質問があります:スクロールビューの固定ヘッダーに別のスタイルを適用するにはどうすればよいですか?
くっついたときに影/高さを追加したい.

ありがとうございました :)

環境

  • 反応ネイティブ: 0.45.0
0 投票する
1 に答える
1895 参照

react-native - React Native - 水平スクロール可能なリストで RefreshControl をシミュレートする方法

問題

各スワイプで常に 1 つの画面全体 (つまり、1 つの「ページ」) をスクロールする水平スクロール可能なリストを開発しています。それが最初のページにあり、ユーザーが再び右に引っ張ると、リスト全体を更新する必要があります。

垂直方向については、ビューが一番上の位置にあるときにユーザーがプルダウンするとScrollView、標準が表示されます。RefreshControlただし、水平バージョンの場合、標準的なソリューションはありません。

私の実験

アイデア

PanResponder感動的で感動的なイベントをキャプチャするために を追加しようとしました。VirtualizedListアプリケーションでa を使用していることに注意してください。基本的なロジックは次のとおりです。

  • を含む非表示View(デフォルトで幅が 0 に設定されている) を作成しActivityIndicator、このビューを として挿入しますListHeaderComponentVirtualizedList
  • VirtualizedListのイベントをリッスンしonScroll、最新のスクロール位置を保存し続けます
  • スクロール位置がほぼ 0 で、ユーザーが右に引っ張ると (イベントが を介してジェスチャをキャプチャPanResponder)、非表示の View の幅を ActivityIndi​​cator でアニメーション化して、RefreshControl の動作をシミュレートします。

結果

ただし、PanResponderは目的のイベントを適切にキャプチャしません。VirtualizedListほとんどの場合、 (Android デバイスで)開始時に右に引っ張ると、標準のヒット エッジ アニメーションのみが表示されます (グラデーション ブルー レイヤーが表示されます)。

onPanResponderGrantいくつかのログを追加することで、が時々トリガーされる可能性があることがわかりましたがonPanResponderMove、 、onPanResponderReleaseonPanResponderTerminateまたはのいずれも起動されませんonPanResponderTerminationRequest

onPanResponderGrantトリガーされると、非表示が部分的に表示ActivityIndicatorされることがあります。「右に引っ張る」効果は短時間しか現れず、隠れたビューの非常に狭い部分だけが表示され、常に即座に停止します。

基になっているものScrollViewがイベントを盗み、コードが応答しないようにしていると思います。しかしonPanResponderTerminationRequest、常に戻るように設定しても、falseまだ役に立ちません。を aに直接代入VirtualizedListしてScrollViewも、同じ結果が得られます。

ScrollView のスクロールが一番上にあるときに、タッチと移動のイベントを適切にキャプチャする方法を知っている人はいますか? または、の水平バージョンを実装する別の実行可能な方法はありRefreshControlますか?

実験コード

一時的な回避策 (完璧ではない)

  • 内部で直接更新イベント (およびアニメーション) を発生させますonPanResponderGrant。この方法では、まだタッチの動きを追跡できません。そのため、スクロール ペインはタッチ ポイントをたどることができません。

  • 追加の条件で操作を移動しonPanResponderMoveますonMoveShouldSetPanResponder(たとえば、独自の「許可」条件判定を追加する): この方法では、タッチの動きを追跡できますが、実際の「許可」を取得していないため、キャプチャできません。 //イベント (つまり、いつ touch イベントが終了する*Releaseかわかりません。したがって、実際にいつ更新イベントを開始するかはわかりません! *Terminate)*End

完璧なソリューション

あなたのアイデアを待っています...