如何解决Lottie 文件无法使用 AppIntroSlider 正确设置动画
我正在使用 expo Lottie-react-native 在 AppIntroSlider 中实现动画。 Lottie 文件为数组的最后一个索引设置动画,但对其他人不起作用。
const slides = [
{
key: '1',image: require('./assets/Screen1.json'),ref: this.animation1,},{
key: '2',image: require('./assets/Screen2.json'),ref: this.animation2,{
key: '3',image: require('./assets/Screen3.json'),ref: this.animation3,{
key: '4',image: require('./assets/Screen4.json'),ref: this.animation4,{
key: '5',image: require('./assets/Screen5.json'),ref: this.animation5,}
];
这是我收集的 Lottie 文件
<AppIntroSlider
skipLabel = "skip"
onSkip = {() => this.wizardViewDone()}
renderItem={this._renderWizard} data={slides}
onSlideChange ={() => this.animation.play()} onDone={() => this.wizardViewDone()} />
这就是我绘制幻灯片的方式
_renderWizard = ({ item }) => {
return (
<View style={styles.animationContainer}>
<LottieView
ref={animation => {
this.animation = animation;
}}
autoPlay={true}
loop={false}
style={{
flex: 1,backgroundColor : "#1e88fd"
}}
source={item.image}
/>
</View>
);
}
并在 componentDidMount 中将 Lottie 文件设置为动画
checkfirstOpen = async () => {
const value = await AsyncStorage.getItem('firstLogin');
console.log(value + "This is asyncStorage result");
try {
if (value !== null) {
this.setState({ wizard: false });
}else{
await this.animation.play();
}
} catch (error) {
// Error retrieving data
}
}
最后一张幻灯片动画正常,但其他幻灯片无法正常工作。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。