📜

ReactNative ScrollView

2024/03/20に公開

React Native

TypeScript

tech

📕Overview

https://reactnative.dev/docs/scrollview

プラットフォーム ScrollView をラップし、タッチロック「レスポンダー」システムとの統合を提供するコンポーネント。

ScrollView には、(スクロールインタラクションを介して) 境界のあるコンテナに高さの制限がない子が含まれるため、機能するには高さが制限されている必要があることに注意してください。 ScrollView の高さを制限するには、ビューの高さを直接設定するか (非推奨)、すべての親ビューの高さが制限されていることを確認します。 {flex: 1} をビュースタックに転送するのを忘れると、ここでエラーが発生する可能性がありますが、要素インスペクターによって簡単にデバッグできるようになります。

他の包含レスポンダーがこのスクロールビューがレスポンダーになるのをブロックすることはまだサポートされていません。

<ScrollView> と <FlatList> - どちらを使用しますか?

ScrollView はすべての反応子コンポーネントを一度にレンダリングしますが、これにはパフォーマンスの欠点があります。

表示したいアイテムの非常に長いリスト、おそらく数画面分のコンテンツがあると想像してください。すべての JS コンポーネントとネイティブビューを一度に作成すると、その多くは表示されない可能性もあり、レンダリングが遅くなり、メモリ使用量が増加します。

ここで FlatList が活躍します。 FlatList は、アイテムが表示される直前に遅延レンダリングし、画面から遠くまでスクロールするアイテムを削除してメモリと処理時間を節約します。

FlatList は、項目間の区切り文字、複数の列、無限スクロールの読み込み、またはすぐにサポートされるその他の機能をレンダリングする場合にも便利です。

🧷summary

ReactNativeでスクロールするViewを作成するときは、ScrollViewコンポーネントを使用します。

import React from 'react';
import {
  StyleSheet,
  Text,
  SafeAreaView,
  ScrollView,
  StatusBar,
} from 'react-native';

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <ScrollView style={styles.scrollView}>
        <Text style={styles.text}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
        </Text>
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: StatusBar.currentHeight,
  },
  scrollView: {
    backgroundColor: 'pink',
    marginHorizontal: 20,
  },
  text: {
    fontSize: 42,
  },
});

export default App;

🧑‍🎓thoughts

ScrollViewコンポーネントを使ってみて気づいたことがあるのですが、Androidだと何故かビルドしてもずっと、ローディングの処理が続いて、表示がされませんでした???
OSごとの設定が必要なのかもしれません...

📕Overview

🧷summary

🧑‍🎓thoughts

Discussion