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

Question

好吧，我正在使用功能组件，并根据这个答案成功地用useRef播放了一个Lottie动画-React Native-在点击时正确播放Lottie？

这对.play()来说很好，但如果已经点击了动画，我需要向后播放(意味着进度=1(。我查看了React Native Lottie-Upon Animation End Reverse，并尝试使用以下代码反转动画，但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原生社区的所有文档，它对我在这里简化的内容有很好的解释。