React nativeとExpoの構成でreact-native-app-intro-sliderとexpo-routerの組み合わせでウェルカムページを実装する方法を解説

ライブラリをインストール

react-native-app-intro-slider

npm install react-native-app-intro-slider

Expo Router

古いバージョンのexpoを使っていなければ、デフォルトで入っている。手動でインストールする場合はこちらの記事を参照

ディレクトリ構成

app ━ welcomePage.jsx
    ┣ home.jsx

コード

import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import AppIntroSlider from 'react-native-app-intro-slider';
import { useRouter } from 'expo-router';


const slides = [
    {
        key: 'one',
        title: 'Title 1',
        text: 'Description.\nSay something cool',
        backgroundColor: '#03a9f4',
    },
    {
        key: 'two',
        title: 'Title 2',
        text: 'Other cool stuff',
        backgroundColor: '#009688',
    },
    {
        key: 'three',
        title: 'Rocket guy',
        text: 'I\'m already out of descriptions\n\nLorem ipsum bla bla bla',
        backgroundColor: '#03a9f4',
    }
];

const WelcomePage = ({ navigation }) => {

    const _renderItem = ({ item }) => {
        return (
            <View style={styles.slide}>
                <Text style={styles.title}>{item.title}</Text>
                <Text style={styles.text}>{item.text}</Text>
            </View>
        );
    }
    const router = useRouter();
    const _onDone = () => {

        router.push('/home');
    }

    return (

        <AppIntroSlider renderItem={_renderItem} data={slides}  bottomButton　onDone={_onDone}/>

    );
};

export default WelcomePage;

const styles = StyleSheet.create({
    slide: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    title: {
        fontSize: 22,
        textAlign: 'center',
    },
    text: {
        textAlign: 'center',
    },
});

コード解説

    const router = useRouter();
    const _onDone = () => {

        router.push('/home');
    }

    return (

        <AppIntroSlider renderItem={_renderItem} data={slides}  bottomButton　onDone={_onDone}/>

    );
};

onDoneが押されると関数_onDoneが発火してexpo-routerで"home"画面へ画面遷移を行う簡単な仕組み

画面遷移を行うライブラリにはreact navigationがあるが、使い方が難しいので避けた。expo-routerはシンプルな使いごこちでとても手触りが良い

参照リンク