跳到主要内容

文本(Text)

警告(Warning):本页是旧版 Text Run 直控方案。新项目请使用 Data Binding

旧版 Text Run 工作流

历史上可以在运行时通过 text run 名称直接读写文本:

  • getTextRunValue(...)
  • setTextRunValue(...)

但要生效,编辑器侧必须:

  1. 给 text run 设置唯一名称
  2. 执行 Export name(导出名称)

否则运行时无法查询到该 run。


Web

const r = new Rive({ src: 'my.riv', onLoad: () => {
console.log(r.getTextRunValue('MyRun'));
r.setTextRunValue('MyRun', 'New text');
}});

React

useEffect(() => {
if (!rive) return;
rive.setTextRunValue('MyRun', 'New Text');
}, [rive]);

React Native

新版 ref 仍有 get/setTextRunValue(兼容用途),但推荐迁移 Data Binding String。

Legacy 通过 RiveRefsetTextRunValue 完成。


Flutter

可在 Artboard 上读写:

artboard.getText('runName');
artboard.setText('runName', 'new value');

Apple / Android(legacy)

两端都提供 text run 读写 API;当 run 不存在时通常会抛错或返回空值,需做好异常处理。


Nested Text Runs(旧能力)

可通过 path 更新组件内部 text run,例如:

ArtboardWithUniqueName/ButtonWithUniqueName

注意:

  • 组件与 run 均需导出
  • 组件名不要使用 /
  • 使用层级唯一名而非显示名

无障碍(Accessibility)建议

Rive 文本在部分平台不等同原生文本节点,建议额外补充:

  • Web:aria-label / aria-live 区域
  • Flutter:Semantics 标签

以保证屏幕阅读器可读性。


迁移建议(Text Run -> Data Binding)

  • 直接文本赋值 → String property
  • 嵌套文本路径 → 路径化 String property
  • 文本联动业务状态 → 在 VMI 层统一管理

相关: