Можно ли присвоить анимации в React Native значение (id)?

Question

Скажем, если моя анимация повторяется 20 раз, но я не хочу, чтобы все они воспроизводились одновременно. Как бы я запустил эту конкретную анимацию, которая имеет значение 1, Если я нажал на 1 тогда остальные 19 не должны срабатывать, кроме 1,

    export default class AnimateScreen extends React.PureComponent {
    constructor(props){

      super(props);

      this.forceUpdateHandler = this.forceUpdateHandler.bind(this);

      this.state = {
      dataSource: '',
      progress: new Animated.Value(0),
    };


    animate = (id) => {

          Animated.timing(this.state.progress, {
            toValue: 1,
            duration: 5000,
            easing: Easing.linear,
          }).start([id]); <!-- Here is my attempt in trying to animate that one specific animation. 


render(){
return(
    <FlatList
               data={this.state.dataSource}
               renderItem={({item}) => 
              <View>
               <View>
                 <Text>Work in progress</Text>
                 <View>
                 <TouchableHighlight
                 onPress={this.animate.bind(this, item.id)}>
                  <Animation
                  progress={this.state.progress}
                  source={require('../tools/animations/heart_icon.json')}
                  />
        </TouchableHighlight>

                   <Text> Hello</Text>

                 </View>

               </View>


               </View>
             }
             keyExtractor={(item, index) => index.toString()}
          />
        );
        }
    }

Я попробовал это, и все же, все анимации сработали. Есть ли способ вызвать их специально?

Источник данных:

"dataSource":[{"id":"10","images":"Emerson live in the sunshine swim in the sea drink the wild air.jpg","note":"Hello","tag":"sunshine"}


    componentDidUpdate(prevProps, prevState) {
  if (!prevState.dataSource) {

      return fetch(`https://www.website.com/React/json-data.php` , {
       method: 'POST',
       headers: {
         'Accept': 'application/json',
         'Content-Type': 'application/json',
       }

      })
        .then((response) => response.json())
        .then((responseJson) => {
          this.setState({
            dataSource: responseJson,
            },function() {
              // In this block you can do something with new state.
            });
        })
        .catch((error) => {
          console.error(error);
        });
    }
  }

Answer 1

Как правило, вы можете добавить ключ прогресса к каждому элементу в источнике данных с анимированным значением 0, а затем при нажатии вы будете анимировать прогресс этого элемента. Это должно выглядеть примерно так:

export default class AnimateScreen extends React.PureComponent {
  constructor(props){

    super(props);

    this.forceUpdateHandler = this.forceUpdateHandler.bind(this);

    this.state = {
      dataSource: [],
      progress: new Animated.Value(0),
    };

    componentDidUpdate(prevProps, prevState) {
      if (!prevState.dataSource) {

        return fetch(`https://www.website.com/React/json-data.php` , {
          method: 'POST',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
          }

        })
        .then((response) => response.json())
        .then((responseJson) => {
          this.setState({
            dataSource: responseJson.map(item => ({ ...item, progress: new Animated.Value(0) })), // Add progress key
          },function() {
            // In this block you can do something with new state.
          });
        })
        .catch((error) => {
          console.error(error);
        });
      }
    }


    animate = (item) => {
      Animated.timing(item.progress, {
        toValue: 1,
        duration: 5000,
        easing: Easing.linear,
      }).start(); <!-- Here is my attempt in trying to animate that one specific animation. 


      render(){
        return(
          <FlatList
            data={this.state.dataSource}
            renderItem={({item}) => 
            <View>
              <View>
                <Text>Work in progress</Text>
                <View>
                  <TouchableHighlight
                    onPress={() => this.animate(item)}>
                    <Animation
                      progress={item.progress}
                      source={require('../tools/animations/heart_icon.json')}
                    />
                  </TouchableHighlight>

                  <Text> Hello</Text>

                </View>

              </View>


            </View>
          }
          keyExtractor={(item, index) => index.toString()}
        />
      );
    }
  }