React Native - 使用 useRef 向后播放动画？错误 - 'undefined is not an object?'

Question

好吧，我正在使用功能组件，并且根据这个答案成功播放了带有 useRef 的 Lottie 动画 -

这对于 .play() 来说非常好，但如果动画已经被点击（意味着进度=1），我需要向后播放动画。我查看了并尝试使用以下代码反转动画，但 LottieRef.current.progress 是 undefined

功能组件：

function NavDot(props) {

        const LottieRef = useRef(null);

        return (
            <TouchableWithoutFeedback onPress={() => {
              onNavPress(props.id);
              //LottieRef.current.play();
                  Animated.sequence([
                      Animated.timing(
                          LottieRef.current.progress,
                          {
                            toValue: 1,
                            duration: (5000),
                          }
                        ),
                        Animated.timing(
                          LottieRef.current.progress,
                          {
                            toValue: 0,
                            duration: (5000),
                          }
                        )
                  ]).start();

            }}>
              <LottieView
                  ref={LottieRef}
                  style={styles.lottieNav}
                  source={require('./assets/circle.json')}
                  loop={false}
              />
            </TouchableWithoutFeedback>
        );
      }

这里有什么问题？

Answer 1

progress 是

的道具

虽然你没有通过这个道具。

请参阅此文档以检查正确的方法。

https://github.com/react-native-community/lottie-react-native#usage

第一个

您需要创建一个 progress 状态。

所以你的函数组件中应该有这样的东西。

const [progress, setProgress] = useState(new Animated.Value(0))

第二个

您需要使用此 progress 变量作为 LottieView

的道具

<LottieView
  ref={LottieRef}
  style={styles.lottieNav}
  source={require('./assets/circle.json')}
  loop={false}
  progress={progress} // <------- Add this
/>

第三

我不确定，但如果您认为您已经可以使用 LottieRef.current.progress。但以防万一。像这样使用你的进度变量。

Animated.sequence([
  Animated.timing(
    progress, // <------ Change here
    {
      toValue: 1,
      duration: 5000,
    }
  ),
  Animated.timing(
    progress, // <------ Change here
    {
      toValue: 0,
      duration: 5000,
    }
  )
]).start();

希望对您有所帮助。但是尝试阅读 react-native-community 的所有文档，它对我在这里简化的所有内容都有很好的解释。

React Native - 使用 useRef 向后播放动画？错误 - 'undefined is not an object?'

React Native - play animation backwards with useRef? Error - 'undefined is not an object?'

javascript

reactjs

react-native

lottie

第一个

第二个

第三