文本

⚠️ 弃用通知： 本页面全部内容记录的是旧版文本操作系统。对于新项目： 请改用数据绑定。对于现有项目： 请尽快规划从直接文本运行操作迁移到数据绑定。

有关设计和动画化文本的更多信息，请参阅编辑器文本部分：

• 文本 — 设计和动画化文本的信息

在运行时读取/更新文本运行

⚠️ 旧版内容警告： 以下部分记录的是已弃用的文本操作系统。此内容仅供旧版支持参考。 新实现应使用数据绑定。

如果您打算在运行时更新文本运行，重要的是在编辑器中为运行手动输入一个_唯一名称_：

然后导出名称：右键单击并选择导出名称

如果一个导出的组件被方括号包围，您可以识别它。这使得运行时可以通过名称“发现”该运行。有关更多信息，请参见导出名称。

⚠️ 如果名称未在编辑器中手动设置，该名称将不会包含在导出的 .riv 中（以减小文件大小）。

文本运行也可以在运行时在组件上更新，请参见下面的在运行时读取/更新嵌套文本运行。

新版运行时（推荐）

通过数据绑定设置文本

此功能已弃用。我们建议使用数据绑定来控制文本。

export default function TextRunExample() {
    const { riveViewRef, setHybridRef } = useRive();
    const { riveFile } = useRiveFile(
    require('../../assets/rive/hello_world_text.riv')
    );

    useEffect(() => {
    if (riveViewRef) {
        try {
        console.log(riveViewRef.getTextRunValue('name'));
        riveViewRef.setTextRunValue('name', 'React Native');
        console.log(riveViewRef.getTextRunValue('name'));
        } catch (err) {
        console.error(err);
        }
    }
    }, [riveViewRef]);

    return (
    <View style={styles.container}>
        <View style={styles.riveContainer}>
        {riveFile ? (
            <RiveView
            style={styles.rive}
            autoPlay={true}
            fit={Fit.Contain}
            file={riveFile}
            hybridRef={setHybridRef}
            />
        ) : null}
        </View>
    </View>
    );
}

旧版运行时

通过 Rive Ref 设置文本

要随时设置给定的文本运行值，引用 Rive ref 上的 .setTextRunValue() API：

setTextRunValue: (textRunName: string, value: string) => void;

提供文本运行名称和第二个参数 textValue，其中包含您想要设置新文本值的字符串值。

示例用法

export default function DynamicText() {
const riveRef = useRef<RiveRef>(null);

const handleInputChange = (e: string) => {
    // 设置 'name' TextRun 的 TextRun 值
    // 名称必须存在，否则会抛出错误
    riveRef.current?.setTextRunValue('name', e);
};

return (
    <SafeAreaView style={styles.safeAreaViewContainer}>
    <ScrollView>
        <Rive
        ref={riveRef}
        resourceName="hello_world_text"
        stateMachineName="State Machine 1"
        />
        <TextInput
        onChangeText={handleInputChange}
        defaultValue="world"
        />
    </ScrollView>
    </SafeAreaView>
);
}

在运行时读取/更新嵌套文本运行

⚠️ 弃用功能： 嵌套文本运行是旧版文本操作系统的一部分。请改用数据绑定来控制运行时的组件文本属性。

在运行时可以设置嵌套文本运行——即不在主画板上而是在组件上的文本。要设置嵌套文本运行，您需要注意输入在画板级别上存在的路径。

例如，要在 Button 画板上获取/设置名为 button_text 的文本运行，您需要提供正确的路径。

设置嵌套文本运行

此处的画板名称是：

• Main -> NestedArtboard -> Button

然而，路径是根据层级中设置的名称确定的：

• ArtboardWithUniqueName -> ButtonWithUniqueName

路径为：ArtboardWithUniqueName/ButtonWithUniqueName

⚠️ 确保将组件和文本运行标记为导出。

导出组件名称

⚠️ 不要在组件名称中使用 "/"，因为这会在运行时破坏搜索功能。

无障碍语义

Rive 现在通过语义支持屏幕阅读器。

有关当前指导，请参见语义文档。