如何解决如何在 React Native 中重新播放 Lottie 动画
我正在尝试将“react-native-app-intro-slider”与 Lottie 动画结合使用。
效果很好,但是当我单击“返回”或“下一步”按钮时,动画停止播放。
如何重新播放动画?
提前致谢!
const renderItem = ({ item }) => {
return (
<View style={styles.container}>
<LottieView
ref={LottieRef}
autoPlay
loop
source={item.lottie}
/>
</View>
</ImageBackground>
)}
const slideChange = () => {
LottieRef.current.play(); // it doesn't work
}
useEffect(() => {
if (LottieRef.current !== null) {
LottieRef.current.play(); // it doesn't work
}
},[LottieRef])
...
<AppIntroSlider
renderItem={renderItem}
data={slides}
onDone={onDone}
onSlideChange={slideChange}
showSkipButton
showPrevButton
/>
解决方法
您需要将 .play()
添加到 componentDidMount 或 in useEffect 以便在每个组件安装上播放动画。
你可以做类似的事情
import React from 'react';
import LottieView from 'lottie-react-native';
export default class BasicExample extends React.Component {
componentDidMount() {
this.animation.play();
// Or set a specific startFrame and endFrame with:
this.animation.play(30,120);
}
render() {
return (
<LottieView
ref={animation => {
this.animation = animation;
}}
source={require('../path/to/animation.json')}
/>
);
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。