ScrollViewの使用

ScrollViewは、複数のコンポーネントやビューを内包できる汎用的なスクロールコンテナです。スクロール可能なアイテムは異種混合にでき、(horizontalプロパティを設定することで) 垂直方向と水平方向の両方にスクロールできます。

この例では、画像とテキストが混在した垂直方向のScrollViewを作成します。

ScrollViewは、pagingEnabled propsを使用することで、スワイプジェスチャーによるビューのページングを許可するように設定できます。ビュー間の水平方向のスワイプは、AndroidではViewPagerコンポーネントを使用しても実装できます。

iOSでは、単一のアイテムを持つScrollViewを使用して、ユーザーがコンテンツをズームできるようにすることができます。maximumZoomScaleとminimumZoomScale propsを設定すると、ユーザーはピンチ＆エキスパンドジェスチャーを使用してズームインおよびズームアウトできるようになります。

ScrollViewは、限られたサイズの少数の項目を表示するのに最適です。ScrollViewのすべての要素とビューは、現在画面に表示されていなくてもレンダリングされます。画面に収まらない長いアイテムのリストがある場合は、代わりにFlatListを使用する必要があります。それでは、次にリストビューについて学びましょう。