Блог

Я использую expo Lottie-react-native для создания анимации в AppIntroSlider. Файлы Лотти анимируются для последнего индекса массива, но для других это не работает.

 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
,
}
];
 

Это моя коллекция файлов Лотти

 <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 анимация файлов Лотти как

  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
}
 

}

Every last slide animating properly but not working others.