Назначение идентификатора this.state для воспроизведения правильной анимации? React Native - PullRequest
Новая
       7

Назначение идентификатора this.state для воспроизведения правильной анимации? React Native

0 голосов
/ 17 мая 2018

Я работал над решением этой проблемы.Мой код настроен так, что у меня есть анимации в плоском списке, и он создал единую анимацию для любого количества данных.Например, мои данные JSON содержат 8 категорий, мой плоский список автоматически содержит 8 анимаций.Вот мой код: 

<FlatList

   data={ this.state.dataSource}

   ItemSeparatorComponent = {this.FlatListItemSeparator}


   renderItem={({item}) => <View>


   <Card>




     <View>
     <TouchableOpacity
     onPress={this.anim_star.bind(this, item.id)}
      style={{position:'absolute',  height: '100%', width: '100%',}}>
      <Animation
      progress={this.state.progress[item.id]}
      source={require('../Animations/favourite_app_icon.json')}
      style={{ height: '100%', width: '100%', position: 'absolute'}}
      resizeMode={`contain`}

      />
      </TouchableOpacity>



     </View>

   </Card>


   </View>


 }

 keyExtractor={(item, index) => index.toString()}
 removeClippedSubviews

/>

Здесь я пытался дать этим анимациям уникальный идентификатор (item.id).Вот функция, которую я использовал для привязки: 

    anim_star = (id) => {

  let progress = this.state.progress;
  progress[id] = new Animated.Value(0);

    this.setState({ progress });
console.log(this.state.progress);
  Animated.timing(this.state.progress, {
    toValue: 1,
    duration: 2000,
    easing: Easing.linear,
  }).start();

}

Я сделал console.log, чтобы увидеть свои результаты, и я вижу, что отображается правильный идентификатор, но я не думаю, что он соответствует правильно.Анимация не воспроизводится вообще.Когда я снимаю [item.id] в progress=this.state.progress, анимация работает, но воспроизводится каждая анимация в этом плоском списке.Я хочу воспроизвести эту анимацию с правильным идентификатором.

Вот результаты моей консоли:

https://imgur.com/a/7Ja3Tlk

И, наконец, вот как выглядят конструкторы: 

    constructor(props)
{
  super(props);

  this.state = {
  isLoading: true,
  id: '',
  dataSource: '',
  progress: {}, 
};

Также следует отметить, что когда все анимации воспроизводились, я записывал эти результаты в консоль и замечал, что массив _children имеет [AnimatedProps], и я думаю, что именно это запускает анимацию.

https://imgur.com/a/9a3VPZa

array(8) представляет все данные, для которых запущены анимации.Причина, по которой 10 все еще существует, заключается в том, что я не удалил: 

let progress = this.state.progress;
  progress[id] = new Animated.Value(0);

Я попытался найти ответы, похожие на мою проблему, но не смог найти ни одного решения.Есть ли способ воспроизвести анимацию уникально?

Также вы можете заметить, что это не часть библиотеки реагировать на нативные ошибки, потому что я использую Lottie для воспроизведения анимаций json.

...