React实战项目做类似王者荣耀的新手引导功能

前言

笔者做这个新手指导调研了三个库，最终的效果的话感觉只有 intro.js 的效果最好，效果如下展示：

React 新手指导最终效果

一、完整的代码

react 代码：

import React, { useState } from "react";
import { Steps, Hints } from "intro.js-react";

import "intro.js/introjs.css";
import "./index.css";

export default function App() {
    const [stepsEnabled, setStepsEnabled] = useState(true);
    const [steps, setSteps] = useState([
        {
            element: ".user-name",
            intro: "输入用户名"
        },
        {
            element: ".password",
            intro: "输入密码"
        },
        {
            element: ".test",
            intro: "最后点击这里提交"
        },
        {
            element: ".next_page",
            intro: "跳转页面"
        }
    ]);
    const [hintsEnabled, setHintsEnabled] = useState(true);
    const [hints, setHints] = useState([
        {
            element: ".user-name",
            hint: "Hello hint",
            hintPosition: "middle-right"
        }
    ]);

    function onExit() {
        setStepsEnabled(false);
    }

    function toggleSteps() {
        setStepsEnabled(!stepsEnabled)
    }

    function addStep() {
        const newStep = {
            element: ".test-add",
            intro: "Test step"
        };
        setSteps([...steps, newStep]);
    }

    function toggleHints() {
        setHintsEnabled(!hintsEnabled)
    }

    function addHint() {
        const newHint = {
            element: ".test",
            hint: "Test hint",
            hintPosition: "middle-right"
        };
        setHints([...hints, newHint]);
    }

    return (
        <div>
            <Steps
                enabled={stepsEnabled}
                steps={steps}
                initialStep={0}
                onExit={() => onExit()}
            />
            <Hints enabled={hintsEnabled} hints={hints} />

            <div className="controls">
                <div>
                    <button onClick={() => toggleSteps()}>Toggle Steps</button>
                    <button onClick={() => addStep()}>Add Step</button>
                </div>
                <div>
                    <button onClick={() => toggleHints()}>Toggle Hints</button>
                    <button onClick={() => addHint()}>Add Hint</button>
                </div>
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', marginTop: 30 }}>
                <div className="inputBox">用户名： <input className="user-name" type="text"/></div>
                <br/>
                <div className="inputBox">密 __ 码： <input className="password" type="password"/></div>
                <hr />
                <button className="test">提交</button>
            </div>
        </div>
    );
}

css 代码：

.controls {
  border-bottom: 1px solid black;
  padding: 10px;
  background-color: Gainsboro;
}

.controls > div {
  margin-bottom: 10px;
}

.controls > div:last-child {
  margin-bottom: 0px;
}

.controls button {
  outline: 0;
  cursor: pointer;
  width: 150px;
  height: 30px;
  font-size: .85rem;
  border: 1px solid RoyalBlue;
  background-color: LightSteelBlue;
  margin-right: 10px;
  font-weight: bold;
  border-radius: 3px;
}

.controls button:hover {
  color: Snow;
  background-color: RoyalBlue;
}

.inputBox {
  width: 50%;
}
.inputBox input {
  width: 80%;
}
button {
  width: 50%;
}

二、代码解析

1. 首先我们是需要先安包的：

npm install intro.js intro.js-react -S
// or
cnpm install intro.js intro.js-react -S
// or
yarn add intro.js intro.js-react -S

2. 安包之后需要进行一个引入：

import React, { useEffect, useState } from "react";
import { Steps, Hints } from "intro.js-react"; // 引入我们需要的组件

import "intro.js/introjs.css"; // 引入 introjs 的样式
import "./index.css"; // 引入我们自己的样式

3. 然后我们初始化四个状态

// 控制是否开启新手指导的
const [stepsEnabled, setStepsEnabled] = useState(true);
// 一共有哪些步骤，对应的步骤应该指向的元素以及应该显示的文字
const [steps, setSteps] = useState([
    {
        element: ".user-name",
        intro: "输入用户名"
    },
    {
        element: ".password",
        intro: "输入密码"
    },
    {
        element: ".test",
        intro: "最后点击这里提交"
    },
    {
        element: ".next_page",
        intro: "跳转页面"
    }
]);
// 是否开启提示的
const [hintsEnabled, setHintsEnabled] = useState(true);
// 设置哪些需要提示
const [hints, setHints] = useState([
    {
        element: ".user-name",
        hint: "Hello hint",
        hintPosition: "middle-right"
    }
]);

4. 新手指导弹窗的效果：

新手提示的效果：

5. 控制状态

// 将步骤关掉
function onExit() {
    setStepsEnabled(false);
}
// 设置是否开始引导
function toggleSteps() {
    setStepsEnabled(!stepsEnabled)
}
// 增加引导部署
function addStep() {
    const newStep = {
        element: ".test-add", // 这里应该是动态的哈
        intro: "Test step" // 这里应该是动态的哈
    };
    setSteps([...steps, newStep]);
}
// 控制是否提示
function toggleHints() {
    setHintsEnabled(!hintsEnabled)
}
// 增加提示
function addHint() {
    const newHint = {
        element: ".test", // 这里应该是动态的哈
        hint: "Test hint", // 这里应该是动态的哈
        hintPosition: "middle-right" // 这里应该是动态的哈
    };
    setHints([...hints, newHint]);
}

6. return 一个组件

<div>
   <Steps
       enabled={stepsEnabled}
       steps={steps}
       initialStep={0}
       onExit={() => onExit()}
   />
   <Hints enabled={hintsEnabled} hints={hints} />

   <div className="controls">
       <div>
           <button onClick={() => toggleSteps()}>Toggle Steps</button>
           <button onClick={() => addStep()}>Add Step</button>
       </div>
       <div>
           <button onClick={() => toggleHints()}>Toggle Hints</button>
           <button onClick={() => addHint()}>Add Hint</button>
       </div>
   </div>

   <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', marginTop: 30 }}>
       <div className="inputBox">用户名： <input className="user-name" type="text"/></div>
       <br/>
       <div className="inputBox">密 __ 码： <input className="password" type="password"/></div>
       <hr />
       <button className="test">提交</button>
   </div>
</div>

三、拓展功能

1. 点击屏幕的时候不关掉引导弹窗

useEffect(() => {
    // 找到 modal 元素重置他的点击事件
    document.querySelector('.introjs-overlay').onclick = () => {}
}, []);

2. 点击每一步的时候额外做一些操作

比如点击到最后一步的时候去跳转页面。

// 首先在设置步骤的时候多设置一步，这样在你点击到最后一个步骤的时候它才能出 next 按钮
<Steps
    enabled={stepsEnabled}
    steps={steps}
    initialStep={0}
    onChange={(nextStepIndex, nextElement) => {
        // 这里可以根据下一个元素，或者下一步的 index 做一些自定义操作
        if (nextStepIndex === 1) {
            // window.location.href = 'https://mybj123.com';
        }
    }}
    onExit={() => onExit()}
/>

原文：点击链接

以上关于React实战项目做类似王者荣耀的新手引导功能的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。