跳到主要内容
中文系列课

输入

⚠️ 弃用通知： 本页面全部内容记录的是旧版输入系统。对于新项目： 请改用数据绑定。对于现有项目： 请尽快规划从输入迁移到数据绑定。此内容仅供旧版支持参考。

有关在 Rive 中创建输入的更多信息，请参阅：输入。

控制状态机输入​

一旦 Rive 文件被加载和实例化，就可以查询状态机的输入，以编程方式设置这些输入值，并且在触发器的情况下可以触发它们。

输入也可以在运行时在组件上设置，请参见下面的嵌套输入。

新版运行时（推荐）​

⚠️ 此功能已弃用。我们建议使用数据绑定。

您可以在视图引用上访问控制数据绑定输入的方法：

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

  useEffect(() => {
    if (riveViewRef) {
      try {
        // 原始值
        console.log(
          'Number value: ',
          riveViewRef.getNumberInputValue('rating')
        );
        // 设置输入值
        riveViewRef.setNumberInputValue('rating', 3.0);
        console.log(
          'Number value: ',
          riveViewRef.getNumberInputValue('rating')
        );
        // 添加延迟以允许视图控制器准备就绪
        setTimeout(() => {
          console.log(
            'Number value after delay: ',
            riveViewRef.getNumberInputValue('rating')
          );
        }, 16);
      } catch (err) {
        console.error(err);
      }
    }
  }, [riveViewRef]);

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

旧版运行时​

使用 React Native 运行时，大多数方法/触发器在 Rive 组件的 ref 上都可用，包括设置状态机的输入值/触发。在这种情况下，无需获取输入的实例。只需从 Rive ref 设置输入状态或触发输入状态。

export default function StateMachine() {
    const riveRef = React.useRef<RiveRef>(null);
    // 在 React state 中维护状态机的值
    const [selectedLevel, setSelectedLevel] = useState('2');

    const setLevel = (n: number) => {
        setSelectedLevel(n.toString());
        // 无需获取状态机输入的实例，只需在 `riveRef` 本身上设置输入状态
        riveRef.current?.setInputState("Designer's Test", 'Level', n);
    };

    return (
        <SafeAreaView style={styles.safeAreaViewContainer}>
            <ScrollView contentContainerStyle={styles.container}>
                <Rive
                    resourceName={'skills'}
                    ref={riveRef}
                    autoplay={true}
                    stateMachineName="Designer's Test"
                />
                <RadioButton.Group
                    onValueChange={(newValue) => setLevel(parseInt(newValue, 10))}
                    value={selectedLevel}
                >
                    <View style={styles.radioButtonsWrapper}>
                        <View style={styles.radioButtonWrapper}>
                            <Text>{'Beginner'}</Text>
                            <RadioButton value={'0'} />
                        </View>
                        <View style={styles.radioButtonWrapper}>
                            <Text>{'Intermediate'}</Text>
                            <RadioButton value={'1'} />
                        </View>
                        <View style={styles.radioButtonWrapper}>
                            <Text>{'Expert'}</Text>
                            <RadioButton value={'2'} />
                        </View>
                    </View>
                </RadioButton.Group>
            </ScrollView>
        </SafeAreaView>
    );
}

参见 React Native API 了解 .setInputState() 和 .fireState() 的参数。

嵌套输入​

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

您可以在运行时控制组件的输入。这些输入不在主画板上，而是在组件上。要设置嵌套输入，您需要知道输入在画板级别上存在的路径。

示例​

Image

⚠️

  • 使用画板的唯一层级名称，而不是画板名称。
  • 不要包含主画板的名称。在上面的示例中，路径是 Volume Molecule，而不是 Menu/Volume Molecule。
  • 确保组件在编辑器中标记为导出，以便在运行时访问它们：

Image

您可以根据需要深入任意多层组件。例如，上面显示的 Volume Molecule 画板有两个具有以下唯一层级名称的组件：

  • Volume Component
  • FX Component

一旦您超过一层组件深度，路径将是唯一层级名称的 / 分隔字符串。

Image

如果您在运行时加载 Menu 画板，并希望在 FX Component 画板上获取/设置输入，路径将是 Volume Molecule/FX Component。

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

新版运行时（推荐）​

⚠️ 注意： 新版运行时建议使用数据绑定而不是旧版输入系统来控制嵌套组件属性。

新版运行时主要使用数据绑定来控制嵌套属性。详情请参见数据绑定文档。

有关在新版运行时中使用数据绑定处理嵌套属性的示例，请参见示例应用。

旧版运行时​

要为上述示例设置 Volume 输入：

riveRef.current?.setInputStateAtPath("volume", 80.0, "Volume Molecule/Volume Component");

所有选项：

  • setInputStateAtPath(inputName: string, value: boolean | number, path: string)
  • fireStateAtPath(inputName: string, path: string)