简介
@trofo/story-engine 是一个基于 React 开发的故事引擎，提供了丰富的组件和 API，能够帮助开发者快速构建互动式的故事应用。本文将介绍该 npm 包的使用方法，并提供示例代码。
安装和引入
可以使用 npm 或者 yarn 安装该包：
npm install @trofo/story-engine
yarn add @trofo/story-engine
在项目中引入该包：
import StoryEngine from '@trofo/story-engine';
快速上手
初始化 StoryEngine
创建一个容器元素，然后在其内部渲染 StoryEngine 组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ ----------- ---- ----------------------
----------------
---- ----------
------------ --
-------
-------------------------------
--添加场景
要添加场景，需要使用 StoryEngine 的 addScene() 方法。下面的代码演示了如何添加一个简单的场景：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ ----------- ---- ----------------------
----- ------ - -
--- ---------
-------- ----- ---
-------- -
-
----- ----- ---
--- --------
-
-
-
----- ------ - -
--- ---------
-------- ----- ---
-------- -
-
----- ----- ---
--- --------
-
-
-
----------------
---- ----------
------------ ---------- ------ -- -- -
------------------------
------------------------
-----------------------
-- --
-------
-------------------------------
--在 onInit 回调函数中，我们添加了两个场景，并且通过调用 start() 方法启动了第一个场景。
路由控制
StoryEngine 通过路由控制场景的切换。每个场景都必须指定 id，并且在场景之间切换时还需要设置路由信息：
-- -------------------- ---- -------
----- ------ - -
--- ---------
-------- ----- ---
-------- -
-
----- ----- ---
--- --------
-
-
-
----- ------ - -
--- ---------
-------- ----- ---
-------- -
-
----- ----- ---
--- --------
-
-
-上面的代码定义了两个场景，并且在场景之间使用了 to 属性来指定跳转。同时，在 StoryEngine 的 onInit 回调函数中，我们使用了 start() 方法来启动第一个场景：
<StoryEngine onInit={({ engine }) => {
engine.addScene(scene1);
engine.addScene(scene2);
engine.start('scene1');
}} />添加组件
可以在场景中添加任意的 React 组件。下面的代码演示了如何添加一个简单的组件：
-- -------------------- ---- -------
----- ------ - -
--- ---------
-------- -
--
-------- ------
-------------
---------------------
---
--
-------- -
-
----- ----- ---
--- --------
-
-
-在 content 属性中，我们添加了一些 React 组件，包括一个标题、一段文字和一个按钮。
添加脚本
除了添加组件之外，还可以通过添加脚本来让场景产生交互。下面的代码演示了如何添加一个脚本：
-- -------------------- ---- -------
----- ------ - -
--- ---------
-------- ----- ---
-------- -
-
----- ----- ---
--- --------
-
--
------- -- ------ -- -- -
----------------------
-
-在场景中添加 script 属性，可以定义一个回调函数来添加脚本。该函数接受一个参数 engine，可以用来访问 StoryEngine 实例的 API。
更多关于 @trofo/story-engine 的文档可以访问 GitHub。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f7c238a385564ab6a60