Reactjs 反应本机：向每个连续项添加增量动画延迟

我正在使用

.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>
            )
        }
    }

const数据=[
{
姓名：“弗雷德”，
年龄:25岁，
},
{
姓名：'约翰'，
年龄:30,，
},
{
名字：“爱丽丝”，
年龄:32岁，
},
从“React”导入React，{Component}
从“react native”导入{Text，View，SafeAreaView，ScrollView}
从“./UserCard”导入用户卡
从“react native Animatable”导入*作为可设置动画
导出默认类UserList扩展组件{
render（）{
返回(
{data.map（（用户，索引）=>(
))}
)
}
}

您可以使用传递的索引设置项目的延迟
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>
                  ))}

))}