如何在reactjs中显示启动画面

Question

我有两个 Splash.jsx 代码和一个 homepage.jsx 代码。我只想在不使用主页时显示启动画面，但我不知道如何将启动画面与主页集成并设置计时器，所以一旦我不使用主页就会显示启动画面。如果主页未被使用，能帮我显示启动画面会很棒。 Homepage.jsx

import React from 'react';

import Card from '../Card/Card'
import img2 from '../../Assets/AutoLoan.png'
import img3 from '../../Assets/KYC.png'
import img4 from '../../Assets/VIsa.png'
import './Homepage.css'


import {
  Swiper,
  SwiperSlide
}
from 'swiper/react';
import 'swiper/css';
import { Navigation } from 'swiper';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';
import { Link } from 'react-router-dom';

 const Homepage= () => {
   return (
     <div>
    
     <div className="background">
       
         <div className="welcome__heading">
                <h1>Welcome!!</h1>
              </div>
              <div className= "customer__support">
           <h2>We are here for customer service.</h2>
            </div >
            <div className="swiper_container">
               <Swiper
                modules={[Navigation]}
                navigation
              spaceBetween={10}
              slidesPerView={3}
              onSwiper={(swiper) => console.log(swiper)}
                onSlideChange={() => console.log('slide change')}
                loop={true}
              >
           <SwiperSlide>
             <Link to="AutoLoan">
               <Card imgsrc={img2} alt="AutoLoan" title="Auto Loan" />
             </Link>
           </SwiperSlide>
           <SwiperSlide>
             <Link to="KYC">
               <Card imgsrc={img3} alt="KYC" title="KYC Form" />
             </Link>
           </SwiperSlide>
           <SwiperSlide>
             <Link to="Debit">
               <Card imgsrc={img4} alt="Visa" title="Visa Debit Card" />
             </Link>
           </SwiperSlide>
            </Swiper>
            </div>
            <div ClassName="button">
              
                <Link to = "Location">
                <button className = "btn1">
                  <i className = "fa fa-map"></i>
              </button>
              </Link>
              <Link to = "Calculator">
              
              <button className = "btn2">
               <i className = "fa fa-calculator"></i>
              </button>
         </Link>
         </div>
       </div>
       </div>
       
          );
          
}

export default Homepage

Splash.jsx

import React from 'react';
import './Splash.css'
import img2 from '../../Assets/Header.png'
import img8 from '../../Assets/hand.svg'




const Splash = () => {
    
    return (
        <div>
            <div className="bg2">
            <div className="header__body">
            <div className="header__left">
                <div className="header__left__image">
                    <img src = {img2} alt="Header"/>
                </div>
                <h1 >Laxmi Bank</h1>
               </div>
            <div className="header__right">
            <h1 >23℃/11:00AM</h1>
                    </div> 
                     
        </div>
                
            </div>
            <div className="splash">
                <h1>TAP HERE</h1>
            
            <div className= "blink">
                <img src = {img8} alt = "taphand" />
                   
             </div>   
        </div>      
        </div>
    );
};

export default Splash;

启动画面应该在 2 秒未使用主页后出现，一旦我们点击启动画面，主页应该再次出现，一旦空闲，启动画面应该出现，反之亦然。而且我不知道如何设置定时器和控制这个组件。所以，如果有人能帮帮我就好了。

Answer 1

您可以使用 react-idle-timer 包。存在可行的解决方案 here

Answer 2

您需要创建一个空闲计时器以在 Homepage
中的用户
当 setTimeout 触发回调时，它将挂载 Splash
安装 Splash 后，单击 Link 标签，上面写着 TAP HERE back to redirect to home

主页 - (path = "/home")

import React,{ useEffect } from "react";
import { useNavigate } from "react-router-dom";

const Homepage= () => {
  let navigate = useNavigate();

  useEffect(() => {
    //Idle timer

    let timerId;

    const resetTimer = () => {
      clearTimeout(timerId);
      timerId = setTimeout(() => {
        navigate("/splash");
      }, 30 * 1000); //30 sec idle time
    };

    document.addEventListener("keydown", resetTimer);
    document.addEventListener("mousemove", resetTimer);
    return () => {
      clearTimeout(timerId);
      document.removeEventListener("keydown", resetTimer);
      document.removeEventListener("mousemove", resetTimer);
    };
  }, []);
}

Splash - (path = "/splash")

const Splash = () => {
  return <div>
    ...
    <Link to='/home'>TAP HERE</Link>
  </div>
}

如何在reactjs中显示启动画面

How to display Splash screen in reactjs

splash-screen

reactjs