item本机:向每个连续项添加增量动画延迟

Question

我正在使用.map函数从对象的静态数组中呈现一个卡片列表。我已经使用react-native-animatable库为每一张卡添加了一个动画，但是目前每一张卡都具有完全相同的delay属性。我想让每个额外的卡都有一个+100的延迟(所以第一张卡的延迟是0，第二张是100，第三张是200，等等)。要做到这一点，最有效的方法是什么？

下面是我的代码：

    const data = [
    {
      name: 'Fred',
      age: 25,
    },
        {
      name: 'John',
      age: 30,
    },
        {
      name: 'Alice',
      age: 32,
    },

        import React, { Component } from 'react'
    import { Text, View, SafeAreaView, ScrollView } from 'react-native'
import UserCard from './UserCard'
import * as Animatable from 'react-native-animatable'
    
    export default class UserList extends Component {
        render() {
            return (
                <SafeAreaView>
                <ScrollView>
                  {data.map((user, index) => (
                    <Animatable.View
                      animation="slideInRight"
                      duration={1000}
                      delay={}
                      useNativeDriver
                      style={{alignItems: 'center'}}>
                        <UserCard
                          userName={user.name}
                          userAge={user.age}
                        />
                    </Animatable.View>
                  ))}
                </ScrollView>
              </SafeAreaView>
            )
        }
    }

Answer 1

可以使用传递的索引设置项的延迟。

delay={index*1000}第一次迭代将有0延迟，其余迭代将有1秒、2秒并继续进行。

                   <Animatable.View
                      animation="slideInRight"
                      duration={1000}
                      delay={index*1000}
                      useNativeDriver
                      style={{alignItems: 'center'}}>
                        <UserCard
                          userName={user.name}
                          userAge={user.age}
                        />
                    </Animatable.View>
                  ))}