如何实现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 =</