FlatList上的项目上的动画只有第一次才出现

Question

我有一个平面列表，并且其中的每个项目都有一个动画，可以在印刷时移动项目，第一次动画太慢了，但是第一次动画就可以了

how animation works for first time

这是列表

                <SectionList
                sections={date}
                renderItem={({index section: {data}}) =>
                         <Flight flight={item} />
                }


            />

这是fligth组件：

导出默认类Flight扩展组件{

constructor(props) {
    super(props)
    this.state = {
        opened: false
    }
    this.anim = new Animated.ValueXY(0, 0)
    this.panResponder = PanResponder.create({
        onStartShouldSetPanResponder: () => true,
        onPanResponderMove: (evt, gestureState) => {
            this.startAnimation(gestureState.dx)
        },
        onPanResponderRelease: () => {
        }
    })
}

getMoreInfo = (ID) => {
    //alert(ID)
    fetch('https://appdcs.faranegar.com/api/SelectDetailFlight', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
                "FlightSchedule_ID": ID
            }
        )

    })
        .then((response) => response.json())
        .then((responseJson) => {
            //this.setState({isLoading : false})
            //alert(responseJson.TextShow)
            Alert.alert("", responseJson.TextShow);
        })
        .catch((error) => {

        });
}

openMenu = () => {
    Animated.spring(                  // Animate over time
        this.anim,            // The animated value to drive
        {
            toValue: {x: -250, y: 0},                   // Animate to opacity: 1 (opaque)
            duration: 0,              // Make it take a while
        }
    ).start();
    this.setState({opened: true})
}

closeMenu = () => {
    Animated.spring(                  // Animate over time
        this.anim,            // The animated value to drive
        {
            toValue: {x: 0, y: 0},                   // Animate to opacity: 1 (opaque)
            duration: 0,              // Make it take a while
        }
    ).start();
    this.setState({opened: false})
}

itemPressed = () => {
    if (this.state.opened) {
        this.closeMenu()
    } else {
        this.openMenu()
    }
}

emailPressed = () => {
    setTimeout(this.closeMenu, 500)
    this.props.showFirstPicker(this.props.flight["ID"])
}

messagePressed = () => {
    setTimeout(this.closeMenu, 500)
    this.getMoreInfo(this.props.flight["ID"])
}

seatMapPressed = () => {
    setTimeout(this.closeMenu, 500)
    this.props.goToSeatMap(this.props.flight["ID"])

}

render() {
    al = this.props.flight["AL"]
    flnb = this.props.flight["FLNB"]
    pcb = this.props.flight["PCB"]
    toCity = this.props.flight["To_City"]
    fromCity = this.props.flight["From_City"]
    reg = this.props.flight["Registration"]
    time = this.props.flight["Time"]
    color = this.props.flight["Color"]
    id = this.props.flight["ID"]
    rowColor = this.props.flight["ColorSelf"]
    sciCount = this.props.flight["SelfCheckinCount"]
    sum = this.props.flight["SumPassenger"]
    sumC = this.props.flight["SumPassengerCheckedIN"]
    percent = parseInt(sciCount * 100 / sumC)
    mCode = this.props.flight["CountNationalID"]

    var swipeoutBtns = [
        {
            onPress: () => this.props.showFirstPicker(this.props.flight["ID"]),
            text: 'send email',
            color: 'green',
            fontFamily: 'iransans',
            backgroundColor: 'white'
        }
    ]


    return (
        (this.props.oneRow === "normal") ?
            <Animated.View style={[this.anim.getLayout(),{marginLeft:10,flexDirection:"row"}]}>
                <TouchableOpacity style={{flexDirection: 'row',width:"100%"}}
                                  onPress={() => this.itemPressed()}
                                  // onPress={() => this.seatMapPressed()}
                >
                    <Card style={flightStyles.card}>
                        <View style={flightStyles.cardView}>
                            <View style={[flightStyles.imageHolderView, {width: "10%"}]}>

                                    <Image source={imgs[al]}
                                           style={[flightStyles.image, {width: 30, height: 30}]}/> :
                                    <Text style={flightStyles.texts}>{fromCity}</Text>}

                            </View>

                            <View style={flightStyles.viewInCard} borderRadius={10} width="87%">
                                <View style={flightStyles.infoHolder} width="10%">
                                    <Text style={flightStyles.texts}>{toCity}</Text>
                                </View>
                                <View style={flightStyles.infoHolder} width="17%">
                                    <Text style={flightStyles.texts}>{al}{flnb}</Text>
                                </View>
                                <View alignItems="center" backgroundColor={"#" + color} width="25%" heigh={40}>
                                    <Text style={flightStyles.texts}>{pcb}</Text>
                                </View>

                                <View style={flightStyles.infoHolder} width="24%">
                                    <Text style={flightStyles.texts}>{reg}</Text>
                                </View>
                                <View style={flightStyles.infoHolder} width="13%">
                                    <Text style={flightStyles.texts}>{time}</Text>
                                </View>

                            </View>
                        </View>
                    </Card>
                </TouchableOpacity>
                    <TouchableOpacity style={{marginLeft: 20, alignItems: 'center', justifyContent: 'center'}}
                                      onPress={() => this.emailPressed()}><Text
                        style={{color: 'green'}}>Email</Text></TouchableOpacity>
                    <TouchableOpacity style={{marginLeft: 20, alignItems: 'center', justifyContent: 'center'}}
                                      onPress={() => this.messagePressed()}><Text
                        style={{color: 'green'}}>Message</Text></TouchableOpacity>

                    <TouchableOpacity style={{marginLeft: 20, alignItems: 'center', justifyContent: 'center'}}
                                      onPress={() => this.seatMapPressed()}>
                        <Text style={{color: 'green'}}>Seat Map</Text>
                    </TouchableOpacity>
    )
}

} 导出默认广告投放

问题在于两个平台都存在，并且仅在首次使用时出现， 如果我们在单击任何行之前先查找所有列表，则不会出现延迟 我想问题是关于列表