React Nativeの公式ドキュメントを和訳してみる 10 - ScrollViewの利用

注意

当記事はReact Native 0.51の公式ドキュメントの独自和訳です。間違いなどあればご指摘ください。

バージョン0.51のドキュメントに準拠します。

参照リンク先は基本的に元サイトです。リンク先サイトを和訳したらそのページに差し替えます。

本家サイトではシミュレータがあり、コードを編集しながら実行でき便利です。

Facebook社に無断なので怒られたら消します。

元サイト
facebook.github.io

ScrollViewは総括的なスクロールコンテナーであり、複数のコンポーネントとビューを含むことができます。スクロール可能になる要素は(リストのように)均一である必要はなく、垂直方向にも水平方向にも(horizontal プロパティを設定すれば)スクロールできます。

この例では画像と文章が混ざった垂直方向のScrollViewを作ります。

import React, { Component } from 'react';
import { AppRegistry, ScrollView, Image, Text } from 'react-native';

export default class IScrolledDownAndWhatHappenedNextShockedMe extends Component {
  render() {
      return (
        <ScrollView>
          <Text style={{fontSize:96}}>Scroll me plz</Text>
          <Image source={require('/react-native/img/favicon.png')} />
          <Image source={require('/react-native/img/favicon.png')} />
          <Image source={require('/react-native/img/favicon.png')} />
          <Image source={require('/react-native/img/favicon.png')} />
          <Image source={require('/react-native/img/favicon.png')} />
          <Text style={{fontSize:96}}>If you like</Text>
          <Image source={require('/react-native/img/favicon.png')} />
          <Image source={require('/react-native/img/favicon.png')} />
          <Image source={require('/react-native/img/favicon.png')} />
          <Image source={require('/react-native/img/favicon.png')} />
          <Image source={require('/react-native/img/favicon.png')} />
          <Text style={{fontSize:96}}>Scrolling down</Text>
          <Image source={require('/react-native/img/favicon.png')} />
          <Image source={require('/react-native/img/favicon.png')} />
          <Image source={require('/react-native/img/favicon.png')} />
          <Image source={require('/react-native/img/favicon.png')} />
          <Image source={require('/react-native/img/favicon.png')} />
          <Text style={{fontSize:96}}>What's the best</Text>
          <Image source={require('/react-native/img/favicon.png')} />
          <Image source={require('/react-native/img/favicon.png')} />
          <Image source={require('/react-native/img/favicon.png')} />
          <Image source={require('/react-native/img/favicon.png')} />
          <Image source={require('/react-native/img/favicon.png')} />
          <Text style={{fontSize:96}}>Framework around?</Text>
          <Image source={require('/react-native/img/favicon.png')} />
          <Image source={require('/react-native/img/favicon.png')} />
          <Image source={require('/react-native/img/favicon.png')} />
          <Image source={require('/react-native/img/favicon.png')} />
          <Image source={require('/react-native/img/favicon.png')} />
          <Text style={{fontSize:80}}>React Native</Text>
        </ScrollView>
    );
  }
}

// Create React Native Appを使っている時はこの行を飛ばす
AppRegistry.registerComponent(
  'AwesomeProject',
  () => IScrolledDownAndWhatHappenedNextShockedMe);

ScrollViewはpropsにpagingEnabledを設定するとスワイプしてページ単位に移動することもできます。Androidではビュー間の水平方向のスワイプはViewPagerAndroidコンポーネントを使っても可能です。

ScrollViewを一つのアイテムだけに対して使えば、その要素に対しズームが可能になります。maximamZoomScaleとminimumZoomScaleのpropを設定すればピンチを使いズームイン・アウトができるようになります。

スクロールビューは限定されたサイズの中で少量のものを配置するのに最適です。画面上に見えていない要素でも、ScrollView内の全ての要素・ビューは描画されてしまいます。もし画面サイズに合わせたもっとたくさんのアイテムの長いリストがあるならば、代わりにFlatListを使うべきです。さぁ、リストビューについて学びましょう。