【React Native】アプリ初回ログイン時の説明スライドを実装

#はじめに
アプリの初回ログインのときにでてくる説明スライド(簡単なチュートリアルみたいなやつ)をReact Nativeで実装してみました。
地味な部分ではありますが、アプリを作る際には必ず実装するページとなるので備忘録としてまとめます。

#実装

まず、WelcomeScreenコンポーネントの中にSlidesコンポーネントを用意し、Slidesに各スライドのデータ(SLIDE_DATA)をPropsとして渡してあげます。

import React from 'react';
import { Slides } from '../components/Slides';

const SLIDE_DATA = [
  { text: 'ダウンロードありがとう！', color: '#03A9F4' },
  { text: 'これは求人アプリだよ！', color: '#009688' },
  { text: 'まずは働きたい場所を選んでね！', color: '#03A9F4' },
];

export const WelcomeScreen = () => {
  return <Slides data={SLIDE_DATA} />;
};

Slidesでデータをとりあえず読み込むと、画面の上の方でテキストが縦並びに表示されます。

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

type SlidesProps = {
  data: { text: string; color: string }[];
};

export const Slides = ({ data }: SlidesProps) => {
  return (
    <ScrollView>
      {data.map((slide, index) => {
        return (
          <View key={slide.text} style={{ backgroundColor: slide.color }}>
            <Text>{slide.text}</Text>
          </View>
        );
      })}
    </ScrollView>
  );
};

ScrollViewのPropsにhorizontalを与えると横並びのスクロールになり、Viewを画面幅(SCREEN_WIDTH)にそろえてあげることでスライドを一枚ずつ表示させることができます。

ただ、GIFをみていただけるとわかると思いますが、この状態だとスクロールをしてもスライドごとの切り替えはまだ起こりません。

    <ScrollView horizontal>
      {data.map((slide, index) => {
        return (
          <View
            key={slide.text}
            style={{
              backgroundColor: slide.color,
              justifyContent: 'center',
              alignItems: 'center',
              width: SCREEN_WIDTH,
            }}
          >
            <Text>{slide.text}</Text>
          </View>
        );
      })}
    </ScrollView>

ここで、ScrollViewのPropsにpagingEnabledを与えると、スライドごとに切り替えることができるようになります。

<ScrollView horizontal pagingEnabled>

styleの整理と最後のスライドへのボタン(アプリ開始用)の追加を行うと、最終的にSlidesは以下のようになります。

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

const SCREEN_WIDTH = Dimensions.get('window').width;

type SlidesProps = {
  data: { text: string; color: string }[];
  onComplete: () => void;
};

export const Slides = ({ data, onComplete }: SlidesProps) => {
  return (
    <ScrollView horizontal style={{ flex: 1 }} pagingEnabled>
      {data.map((slide, index) => {
        return (
          <View
            key={slide.text}
            style={[styles.slideStyle, { backgroundColor: slide.color }]}
          >
            <Text style={styles.textStyle}>{slide.text}</Text>
            {index === data.length - 1 && (
              <Button
                title="Onwards!"
                buttonStyle={styles.buttonStyle}
                onPress={onComplete}
              />
            )}
          </View>
        );
      })}
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  slideStyle: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    width: SCREEN_WIDTH,
  },
  textStyle: {
    fontSize: 30,
    color: 'white',
  },
  buttonStyle: {
    backgroundColor: '#0288D1',
    marginTop: 15,
  },
});

#おわりに
ScrollViewを少しいじるだけで横方向のスライドショーのようなものを簡単につくれました。React Nativeのv63でScrollViewのPropsが増えていたので、それらで面白い機能がつくれるかどうかちょっと調べてみようと思います。