React Native - 正确播放 Lottie 吗？

Question

所以我的应用程序是用功能组件 ( export default function App() { ) 编写的，并且我在其中还有其他功能组件。其中之一包括一个 Lottie 动画：

function NavDot(props)
    {
      return (
      <TouchableWithoutFeedback onPress={() => onNavPress(props.id)}>
        <LottieView style={styles.lottieNav} source={require('./assets/circle.json')} />
      </TouchableWithoutFeedback>);
    }

这会在按下时调用此函数：

const onNavPress = (id) => {
    console.log(`nav ${id} pressed`);
  };

哪个有效，但可能正确也可能不正确。我无法将 animation 参数从 LottieView 传递到外部 onPress 函数。根据 Lottie 文档，我需要在媒体上做 animation.play()，但是在功能组件中引用 this 会出现“未定义”错误。

如何像这样点击播放 Lottie 动画（一次，而不是循环播放）？

Answer 1

首先，函数组件上没有变量 this。

如果您使用的是来自 https://github.com/react-native-community/lottie-react-native 的 Lottie，您可以检查以下步骤来尝试它是否正常工作。

您需要导入 React Hook useRef

import {useRef} from 'react';

在您的组件上，您应该创建一个变量来接收对 Lottie 的引用

function NavDot(props) {

  const LottieRef = useRef(null); // <---------------- Create reference variable

  return (
      <TouchableWithoutFeedback onPress={() => {
        onNavPress(props.id);
        LottieRef.current.play(); // <---------------- OnPress just call the lottieRef to animate it.
      }}>
        <LottieView 
            ref={LottieRef}
            style={styles.lottieNav} 
            source={require('./assets/circle.json')} 
        />
      </TouchableWithoutFeedback>
  );
}

React Native - 正确播放 Lottie 吗？

React Native - properly play Lottie on tap?

reactjs

react-native

lottie