Word\<T extends string | DynamicWord | Pausing | TextEvent = string | DynamicWord | Pausing | TextEvent\>

用于对白文本样式的 `Word` 类，涵盖颜色、加粗、斜体、注音与自定义渲染

Word 是句子的一部分。它用于为文本添加样式

构建一个红色的单词：

import { Word } from 'narraleaf-react';

const word = new Word("Hello", {color: "#f00"});

构建一个带有注音的单词：

const word = new Word("你好", {ruby: "nǐ hǎo"});

构建一个动态单词：

// This word will be executed when it is displayed
const word = new Word((ctx) => 
    `Now it is ${new Date().toLocaleTimeString()}`
, {color: "#f00"});

静态方法

isWord

obj: any - 要检查的对象
如果对象是 Word 的实例，则返回 true，否则返回 false

color

text: string | Word - 要着色的文本或 Word 实例
color: Color - 要应用的颜色，参见 Color
返回一个具有指定颜色的新 Word 实例

bold

text: string | Word - 要加粗的文本或 Word 实例
返回一个具有加粗格式的新 Word 实例

italic

text: string | Word - 要斜体化的文本或 Word 实例
返回一个具有斜体格式的新 Word 实例

custom

用你自己的组件渲染一个词，参见自定义渲染。自 0.27.0 起可用

text: string | Word - 要渲染的文本或 Word 实例
render: WordRenderer - 一个组件，或已用 registerWordRenderer 注册的组件 id
config?: Partial<WordConfig> & { data?: T } - 去掉 render 的 WordConfig，外加交给组件的 data 负载
返回一个由该组件绘制的新 Word 实例

公共方法

构造函数

text: T - 单词的内容
config?: Partial<WordConfig> - WordConfig

toString

如果单词是字符串，则返回该字符串。否则，返回一个空字符串

返回 string

自定义渲染

自定义词仍是一个普通的文本词，只是套了一个组件。它和其他词一样逐字打出，进入回想、已读记录和配音管线时都是它的纯文本，并且从不参与序列化：行被重新求值时组件会重新挂上，因此存档里不留任何痕迹

import { Word, WordRenderProps } from "narraleaf-react";

function GlossaryTerm({children, revealed, data}: WordRenderProps<{entry: string}>) {
    return (
        <span className="underline decoration-dotted"
              onClick={() => revealed && openGlossary(data.entry)}>
            {children}
        </span>
    );
}

character.say([
    "今天的",
    Word.custom("以太浓度", GlossaryTerm, {data: {entry: "aether"}}),
    "高得反常。",
]);

组件接收 WordRenderProps。基于它做出的完整浮层，参见自定义词

已排版的文本

children 是引擎已经排好版的词文本，注音（ruby）、竖排书写模式和縦中横都已应用其中。请渲染 children；用 text 代替它会得到同样的字符，但这三样都没有

样式顺序

组件渲染在引擎负责设置样式的那个元素内部，因此解析后的样式已经生效：引擎默认值、对话框的文字 props、句子、词，依次覆盖。组件在最内层，所以它设置的任何样式都最后应用

Word.custom 与其他工厂方法可以双向组合。Word.bold(Word.custom(text, Term)) 和 Word.custom(Word.color(text, "#f00"), Term) 都同时保留样式和组件

点击

词还在打字时，点击它与点击其他任何地方一样推进当前行。词完全显示之后，它接管自己的点击，行不会在它背后推进

换行

含换行的自定义词会按行拆成多个包裹元素（换行处于两者之间，不属于任何一边），其中只有最后一个报告 revealed。请把换行放在自定义词前后的词里，而不是放进它内部

NVL 模式

NVL 模式下自定义词的渲染与行为完全相同，但 useDialogOverlay 在那里没有宿主，不会给出容器。需要在 NVL 模式下工作的浮层要就地渲染

渲染器注册表

在代码里构建的词直接携带组件。以数据形式到来的词（从故事文件编译而来，或由插件提供）携带的是一个 id，绘制这个词时再解析该 id。以下三个函数均自 0.27.0 起可用

import { registerWordRenderer, Word } from "narraleaf-react";

registerWordRenderer("glossary", GlossaryTerm);

new Word("以太浓度", {render: "glossary", data: {entry: "aether"}});

没有注册过的 id 会退回渲染为纯文本，并在控制台按 id 各报告一次。它不会抛出异常，因此插件缺失的那一行仍然可读

registerWordRenderer

id: string - 词所引用的 id
component: React.ComponentType<WordRenderProps<T>> - 用来绘制这些词的组件
返回一个用于取消注册的函数

重复注册同一个 id 会替换掉原组件，屏幕上已有的行会在下一次渲染时用上新组件

unregisterWordRenderer

id: string - 要移除的 id
返回 void

getWordRenderer

id: string - 要查询的 id
返回已注册的组件，或 null

Word\<T extends string | DynamicWord | Pausing | TextEvent = string | DynamicWord | Pausing | TextEvent\>

本页目录