React NativeのScrollViewコンポーネントとは？縦横スクロールの実装方法を解説

ScrollViewコンポーネントとは？

ScrollViewは、複数のコンポーネントやビュー（View）を格納できるスクロール可能なコンテナです。React Nativeのコアコンポーネントのひとつで、垂直方向と水平方向の両方のスクロールに対応しています。

ScrollViewは、アプリが動作しているプラットフォームに応じて、自動的にネイティブの対応要素へマッピングされる仕組みになっています。

• Android：<ScrollView>
• iOS：<UIScrollView>
• Web環境：<div>

この仕組みにより、開発者はプラットフォーム間の違いを意識することなく、共通のコードでスクロール機能を実装できます。

例1：ScrollViewで垂直スクロールを実装する

この例では、Textコンポーネントを含むViewをScrollViewで囲み、さらにその外側を親Viewでラップした構造になっています。

まず、ScrollViewを使用するために必要なコンポーネントをインポートします。

import { Text, View, StyleSheet, ScrollView } from 'react-native';

次に、ScrollView内に表示するデータを、stateオブジェクトのnamesとして定義します。

state = {
  names: [
    { 'name': 'Ben', 'id': 1 },
    { 'name': 'Susan', 'id': 2 },
    { 'name': 'Robert', 'id': 3 },
    { 'name': 'Mary', 'id': 4 },
    { 'name': 'Daniel', 'id': 5 },
    { 'name': 'Laura', 'id': 6 },
    { 'name': 'John', 'id': 7 },
    { 'name': 'Debra', 'id': 8 },
    { 'name': 'Aron', 'id': 9 },
    { 'name': 'Ann', 'id': 10 },
    { 'name': 'Steve', 'id': 11 },
    { 'name': 'Olivia', 'id': 12 }
  ]
}

this.state.namesは配列なので、map()メソッドを使って各要素を取り出し、View→Textコンポーネントの中に名前を表示していきます。

<ScrollView>
  {this.state.names.map((item, index) => (
    <View key={item.id} style={styles.item}>
      <Text>{item.name}</Text>
    </View>
  ))}
</ScrollView>

ポイント：ScrollViewは、サイズの小さい静的なデータの表示に最適です。一方、動的で大量のリストデータを扱う場合は、パフォーマンスに優れたFlatListコンポーネントを使うのがおすすめです。

以下がScrollViewの完全なコードです。

import React, { Component } from "react";
import { Text, View, StyleSheet, ScrollView } from 'react-native';

class ScrollViewExample extends Component {
  state = {
    names: [
      { 'name': 'Ben', 'id': 1 },
      { 'name': 'Susan', 'id': 2 },
      { 'name': 'Robert', 'id': 3 },
      { 'name': 'Mary', 'id': 4 },
      { 'name': 'Daniel', 'id': 5 },
      { 'name': 'Laura', 'id': 6 },
      { 'name': 'John', 'id': 7 },
      { 'name': 'Debra', 'id': 8 },
      { 'name': 'Aron', 'id': 9 },
      { 'name': 'Ann', 'id': 10 },
      { 'name': 'Steve', 'id': 11 },
      { 'name': 'Olivia', 'id': 12 }
    ]
  }
  render(props) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', margin: 15 }}>
        <ScrollView>
          {this.state.names.map((item, index) => (
            <View key={item.id} style={styles.item}>
              <Text>{item.name}</Text>
            </View>
          ))}
        </ScrollView>
      </View>
    );
  }
}
export default ScrollViewExample;

const styles = StyleSheet.create({
  item: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 30,
    margin: 2,
    borderColor: '#2a4944',
    borderWidth: 1,
    backgroundColor: '#d2f7f1'
  }
})

実行結果

例2：ScrollViewで水平スクロールを実装する

デフォルトでは、ScrollViewはデータを垂直方向に表示します。データを水平方向に表示したい場合は、horizontal={true}というpropsを指定します。

<ScrollView horizontal={true}>
  {this.state.names.map((item, index) => (
    <View key={item.id} style={styles.item}>
      <Text>{item.name}</Text>
    </View>
  ))}
</ScrollView>

以下が水平スクロール版の完全なコードです。

import React, { Component } from "react";
import { Text, View, StyleSheet, ScrollView } from 'react-native';

class ScrollViewExample extends Component {
  state = {
    names: [
      { 'name': 'Ben', 'id': 1 },
      { 'name': 'Susan', 'id': 2 },
      { 'name': 'Robert', 'id': 3 },
      { 'name': 'Mary', 'id': 4 },
      { 'name': 'Daniel', 'id': 5 },
      { 'name': 'Laura', 'id': 6 },
      { 'name': 'John', 'id': 7 },
      { 'name': 'Debra', 'id': 8 },
      { 'name': 'Aron', 'id': 9 },
      { 'name': 'Ann', 'id': 10 },
      { 'name': 'Steve', 'id': 11 },
      { 'name': 'Olivia', 'id': 12 }
    ]
  }
  render(props) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', marginTop: 100 }}>
        <ScrollView horizontal={true}>
          {this.state.names.map((item, index) => (
            <View key={item.id} style={styles.item}>
              <Text>{item.name}</Text>
            </View>
          ))}
        </ScrollView>
      </View>
    );
  }
}
export default ScrollViewExample;

const styles = StyleSheet.create({
  item: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 30,
    margin: 2,
    borderColor: '#2a4944',
    borderWidth: 1,
    height: 100,
    backgroundColor: '#d2f7f1'
  }
})

実行結果

まとめ

ScrollViewは、小規模な静的データをスクロール表示するのに便利なコンポーネントです。デフォルトでは垂直スクロールですが、horizontal={true}を指定するだけで水平スクロールも簡単に実現できます。ただし、大量の動的データを扱う場合は、表示項目を仮想化してパフォーマンスを最適化できるFlatListの利用を検討しましょう。