Rive Ref 方法

新版运行时（推荐）

一旦您通过 useRive hook 获取到 Rive ref 对象，就有许多方法可用于控制您的 Rive 图形。

• play() — () => Promise<void>。开始播放 Rive 图形。
• pause() — () => Promise<void>。暂停 Rive 图形。
• reset() — () => Promise<void>。将 Rive 图形重置为其初始状态。
• playIfNeeded() — () => void。低开销函数，确保 Rive 图形正在播放。在属性值更新后使用，以确保图形被更新。
• awaitViewReady() — () => Promise<boolean>。等待 Rive 视图准备就绪。返回一个 Promise，当 Rive 视图准备就绪时解析。
• bindViewModelInstance(viewModelInstance) — (viewModelInstance: ViewModelInstance) => void。将视图模型实例绑定到 Rive 视图。参见数据绑定文档了解更多详情。
• getViewModelInstance() — () => ViewModelInstance | undefined。从 Rive 视图获取当前绑定的视图模型实例。返回绑定的 ViewModelInstance，如果未绑定则返回 undefined。
• setTextRunValue(name, value, path?) — (name: string, value: string, path?: string) => void。在 Rive 视图上设置文本运行值。

  ⚠️ 此方法已弃用。请改用数据绑定。参见数据绑定文档。

• getTextRunValue(name, path?) — (name: string, path?: string) => string。从 Rive 视图获取文本运行值。

  ⚠️ 此方法已弃用。请改用数据绑定。参见数据绑定文档。

• setNumberInputValue(name, value, path?) — (name: string, value: number, path?: string) => void。在 Rive 视图上设置数字状态机输入值。

  ⚠️ 此方法已弃用。请改用数据绑定。参见数据绑定文档。

• getNumberInputValue(name, path?) — (name: string, path?: string) => number。从 Rive 视图获取数字状态机输入值。

  ⚠️ 此方法已弃用。请改用数据绑定。参见数据绑定文档。

• setBooleanInputValue(name, value, path?) — (name: string, value: boolean, path?: string) => void。在 Rive 视图上设置布尔状态机输入值。

  ⚠️ 此方法已弃用。请改用数据绑定。参见数据绑定文档。

• getBooleanInputValue(name, path?) — (name: string, path?: string) => boolean。从 Rive 视图获取布尔状态机输入值。

  ⚠️ 此方法已弃用。请改用数据绑定。参见数据绑定文档。

• triggerInput(name, path?) — (name: string, path?: string) => void。在 Rive 视图上触发触发器状态机输入。

  ⚠️ 此方法已弃用。请改用数据绑定。参见数据绑定文档。

• onEventListener(onEvent) — (onEvent: (event: UnifiedRiveEvent) => void) => void。向 Rive 视图添加事件监听器。

  ⚠️ 此方法已弃用。请改用数据绑定。参见数据绑定文档。

• removeEventListeners() — () => void。从 Rive 视图移除所有事件监听器。

  ⚠️ 此方法已弃用。请改用数据绑定。参见数据绑定文档。

旧版运行时

一旦您获取到 Rive ref 对象，就有许多方法可用于控制动画和状态机。

.play()

一种引用方法，将播放单个动画或状态机。对于当前正在播放的动画，这是一个空操作。

类型：(animationName?: string, loop?: LoopMode, direction?: Direction, isStateMachine?: boolean) => void

• animationName — 指定应播放哪个单个动画。我们强烈建议在此处传递一个值。
  • 默认：""
• loop — 指定播放动画应使用哪个 LoopMode。
  • 默认：LoopMode.Auto
• direction — 指定播放动画应使用哪个 Direction。
  • 默认：Direction.Auto
• isStateMachine — 指定传入的 animationName 是状态机还是线性动画。
  • 默认：false

示例：

import Rive, { RiveRef } from 'rive-react-native';

const resourceName = 'truck_v7'

function App() {
  const riveRef = React.useRef<RiveRef>(null);

  const handlePlay = () => { riveRef.current?.play() };

  return (
    <>
      <Rive ref={riveRef} resourceName={resourceName} autoplay={false} />
      <Button onPress={handlePlay} title="Play">
    </>
  );
}

.pause()

一种引用方法，将暂停任何正在播放的动画/状态机。对于当前已停止/暂停的动画，这是一个空操作。

类型：() => void

示例：

import Rive, { RiveRef } from 'rive-react-native';

const resourceName = 'truck_v7'

function App() {
  const riveRef = React.useRef<RiveRef>(null);

  const handlePause = () => { riveRef.current?.pause() };

  return (
    <>
      <Rive ref={riveRef} resourceName={resourceName} />
      <Button onPress={handlePause} title="Pause">
    </>
  );
}

.stop()

一种引用方法，将停止动画/状态机。对于当前已停止/暂停的动画，这是一个空操作。

类型：() => void

示例：

import Rive, { RiveRef } from 'rive-react-native';

const resourceName = 'truck_v7'

function App() {
  const riveRef = React.useRef<RiveRef>(null);

  const handleStop = () => { riveRef.current?.stop() };

  return (
    <>
      <Rive ref={riveRef} resourceName={resourceName} />
      <Button onPress={handleStop} title="Stop">
    </>
  );
}

.reset()

一种引用方法，将重置整个画板。如果 autoplay 未被显式设置为 false，它将立即播放 animationName 或第一个动画（如果未传递 animationName）。

类型：() => void

import Rive, { RiveRef } from 'rive-react-native';

const resourceName = 'truck_v7'

function App() {
  const riveRef = React.useRef<RiveRef>(null);

  const handleReset = () => { riveRef.current?.reset() };

  return (
    <>
      <Rive ref={riveRef} resourceName={resourceName} autoplay={true} />
      <Button onPress={handleReset} title="Reset">
    </>
  );
}

.fireState()

一种引用方法，将在所有活跃的匹配状态机上触发由 inputName 标识的 trigger。

类型：(stateMachineName: string, inputName: string) => void

• stateMachineName — 指定状态机名称，将与所有活跃状态机进行匹配。
• inputName — 指定应触发的 trigger 的名称。

示例：

import Rive, { RiveRef } from 'rive-react-native';

const resourceName = 'ui_swipe_left_to_delete'

function App() {
  const riveRef = React.useRef<RiveRef>(null);

  const handleFireState = () => { riveRef.current?.fireState('Swipe to delete', 'Trigger Delete') };

  return (
    <>
      <Rive ref={riveRef} resourceName={resourceName} autoplay={true} />
      <Button onPress={handleFireState} title="FireState">
    </>
  );
}

.setInputState()

一种引用方法，将在所有活跃的匹配状态机上将由 inputName 标识的 input 状态设置为给定的 value。

类型：(stateMachineName: string, inputName: string, value: boolean | number) => void

• stateMachineName — 指定状态机名称，将与所有活跃状态机进行匹配。
• inputName — 指定应更新的 input 状态的名称。
• value — 指定 input 状态应设置的值。

示例：

import Rive, { RiveRef } from 'rive-react-native';

const resourceName = 'ui_swipe_left_to_delete'
const threshold = 50

function App() {
  const riveRef = React.useRef<RiveRef>(null);

  const handleFireState = () => {
    riveRef.current?.setInputState(
      'Swipe to delete',
      'Swipe Threshold',
      threshold
    );
  };

  return (
    <>
      <Rive ref={riveRef} resourceName={resourceName} autoplay={true} />
      <Button onPress={handleFireState} title="FireState">
    </>
  );
}

.setTextRunValue()

一种引用方法，在给定的文本运行（通过 textRunName）上设置文本运行值（通过 value）。

类型：setTextRunValue: (textRunName: string, value: string) => void

• textRunName — 要设置新文本值的文本运行的名称。了解更多关于文本运行的信息：文本
• value — 指定应在文本运行上设置的新文本值

示例：

import Rive, { RiveRef } from 'rive-react-native';

const resourceName = 'ui_swipe_left_to_delete'
const threshold = 50

function App() {
  const riveRef = React.useRef<RiveRef>(null);

  const handleSetText = () => {
    riveRef.current?.setTextRunValue(
      'MyRunName',
      'New Text',
    );
  };

  return (
    <>
      <Rive ref={riveRef} resourceName={resourceName} autoplay={true} />
      <Button onPress={handleSetText} title="SetText">
    </>
  );
}