このすみノート

Webエンジニアが技術や趣味を書くブログです。

React NativeのScrollView入門 基本的な使い方から横スクロールまでを解説する

テクノロジー

海外の記事なのですが、「React Native ScrollView Example Tutorial」が、写真付きで分かりやすい解説だったので、要約しつつ紹介します。

Krunalさん、とても丁寧な記事をありがとうございます。

appdividend.com

ScrollViewを使わない場合

普通にViewの下にTextを並べていくと、FlexCSSによって等間隔にTextが並べられます。

サンプルコード

// App.js

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

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 20,
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    flex: 1,
    margin: 20,
    backgroundColor: 'orange',
    margin: 10,
    textAlign: 'center',
    fontSize: 20,
    paddingTop: 70,
  }
});

表示結果

f:id:konosumi:20180718222459p:plain

Textの数を増やしてみるとどうなるのか？

それでは、Textの数を増やしてみたらどうなるでしょうか？

サンプルコード

return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
      </View>
    );

表示結果

FlexCSSによって、等間隔の配置は維持されましたが、テキストが表示しきれず、全て隠れてしまいました。

f:id:konosumi:20180718222721p:plain

ScrollViewの基本形

それでは早速、ScrollViewを使用して、隠れてしまったテキストを復活させてみましょう。

サンプルコード

// App.js

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

export default class App extends Component {
  render() {
    return (
      <ScrollView>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  welcome: {
    flex: 1,
    margin: 20,
    backgroundColor: 'orange',
    margin: 10,
    textAlign: 'center',
    fontSize: 20,
    paddingTop: 70,
  }
});

表示結果

「Welcome to React Native」の文字が復活し、ちゃんと表示されるようになりました！ちなみに、静止画だと伝わりづらいですが、上下にスワイプするとスクロールするようになっています。

f:id:konosumi:20180718223559p:plain

スクロールバーを表示したくない場合

「showsVerticalScrollIndicator={false}」とすることで、スクロールバーを表示しないようにすることができます。

サンプルコード

<ScrollView showsVerticalScrollIndicator={false}>
   <Text style={styles.welcome}>Welcome to React Native</Text>
   <Text style={styles.welcome}>Welcome to React Native</Text>
   <Text style={styles.welcome}>Welcome to React Native</Text>
   <Text style={styles.welcome}>Welcome to React Native</Text>
   <Text style={styles.welcome}>Welcome to React Native</Text>
   <Text style={styles.welcome}>Welcome to React Native</Text>
   <Text style={styles.welcome}>Welcome to React Native</Text>
   <Text style={styles.welcome}>Welcome to React Native</Text>
   <Text style={styles.welcome}>Welcome to React Native</Text>
</ScrollView>

横スクロールに変更する

「horizontal={true}」とすることで、横スクロールに対応することもできます。

サンプルコード

 return (
      <ScrollView horizontal={true}>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
      </ScrollView>
    );

表示結果

静止画だと分かりませんが、指を左右にスワイプすることで、スクロールするようになっています。

f:id:konosumi:20180718224316p:plain

応用：画面下だけスクロールさせないで固定する

ScrollViewを応用すると、画面下のbottom領域だけスクロールさせないで固定するといった事が可能です。

サンプルコード

// App.js

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

// 画面下の10%だけスクロール領域から外したいので高さを取得しておく
const { height } = Dimensions.get("window");

export default class App extends Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
        <ScrollView>
          <Text style={styles.welcome}>Welcome to React Native</Text>
          <Text style={styles.welcome}>Welcome to React Native</Text>
          <Text style={styles.welcome}>Welcome to React Native</Text>
          <Text style={styles.welcome}>Welcome to React Native</Text>
          <Text style={styles.welcome}>Welcome to React Native</Text>
          <Text style={styles.welcome}>Welcome to React Native</Text>
          <Text style={styles.welcome}>Welcome to React Native</Text>
          <Text style={styles.welcome}>Welcome to React Native</Text>
          <Text style={styles.welcome}>Welcome to React Native</Text>
        </ScrollView>
        <Text style={{ height: height * 0.1 /* 下部10%はスクロール外とする */, backgroundColor: 'blue', color: 'white' }}>Welcome to React Native</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  welcome: {
    flex: 1,
    margin: 20,
    backgroundColor: 'orange',
    margin: 10,
    textAlign: 'center',
    fontSize: 20,
    paddingTop: 70,
  }
});

表示結果

静止画だと分かりづらいですが、画面下の青い部分は固定で表示され、それより上のオレンジ色のTextが並んでいる領域だけが、スクロールします。

f:id:konosumi:20180718225419p:plain

さいごに

ReactNativeのScrollViewは、わりと素直に実装するだけで、普通に使えることが分かりました。画面に詰め込む要素が多い場合は「ScrollView」は欠かせない存在ですので、今後も活用して行きたいと思います。

参考：React Native ScrollView Example Tutorial

appdividend.com

konosumi 読者になる

コメントを書く