web-dev-qa-db-ja.com

HighLight / ScrollTo-React-NativeのListView、ScrollView

反応ネイティブで少し遊んでいて、自分では理解できない段階で行き詰まりました。アイテムのリストがあり、自動的にいくつかのアイテムまでスクロールしたいと思います。

ScrollViewとcontentOffset = {{x：0、y：0}}を使用して設定およびオフセットできることはわかっていますが、各項目の位置を追跡する必要があるため、少し複雑になります。 mそれを行う簡単な方法があるかどうか疑問に思っているので、ListViewの特定の行に少し焦点を合わせることができました。

Libsで利用できるそのようなものはありますか？

listviewscrollviewreact-native
13
Gabriel Lopes

ScrollViewは、特定のリスト項目にスクロールするメソッドを提供していませんが、scrollTo({x, y, animated})メソッドを提供しています。

リストアイテムの高さが等しい場合は、scrollTo({y:itemIndex * ROW_HEIGHT})を呼び出して、それらを使用して特定のアイテムへのスクロールを実装できます。

ScrollViewインスタンスにアクセスできるようにするには、refプロパティコールバックを使用してキャプチャする必要があります。

<ScrollView ref={view => this._scrollView = view} />

そして、スクロール位置を他の場所に設定します：

scrollToRow(itemIndex) {
  this._scrollView.scrollTo({y:itemIndex * ROW_HEIGHT});
}
15
jevakallio

私は react-native-scroll-into-view を公開しました。これは、React Native ScrollViewの「scrollIntoView」機能を有効にするライブラリです。

SectionListのような他のリストについては、他の回答で言及されているようなアイテムインデックスを引き続き使用できます。

4
Sebastien Lorber