如何实现app简易版引导页

如何实现app简易版引导页

实现思路

刚开始在这里我想到两种实现方案,一个是在路由这块进行实现,一个使用react-native 自带的Modal实现,
遮住首页,然后划到最后一个页面,来关闭Modal,并跳转到首页;再根据react-native自带的AsyncStorage来进行缓存,来判断是否是安装app,如果有,则不会出现此页面,没有就会出现

实现效果

实现代码

// An highlighted block
import React, {
    useState, useCallback, useEffect, useRef } from 'react';
import {
    StyleSheet, Text, View, Image, ImageBackground, TouchableOpacity, Modal } from 'react-native';
import {
    observer, notificationStore, Storage, GuideKeys } from '@src/store';
import Swiper from 'react-native-swiper';
import {
    authNavigate } from '@src/router';

export const FirstGuideModal = observer((navigation) => {
   
    const [visible, setVisible] = useState(false);
    const shown = useRef(false);
    const isAgreed = useRef(true);
    // 打开modal
    const showModal = useCallback((data) => {
   
        if (!shown.current) {
   
            shown.current =</