反应本机。 ScrollView中的滞后滚动动画

Question

当我垂直上下滚动时，动画在滑块（BannerSwiper）之后的前两个组件（CompetitionsList，CampList）中开始滞后。我无法解决。我尝试将Animation.ScrollView与“ UseNativeDriver：true”一起使用，但没有帮助。 CSS可能有问题。

这是屏幕的gif： https://i.yapx.ru/DT9CR.gif

这是我的代码：

export default class HomeComponent extends React.Component {

  render() {
    return (
        <View  style={styles.container}>
            <ScrollView >
                <BannerSwiper/>
                <CompetitionsList home={true} {...this.props}/>
                <CustomDivider/>
                <CampList home={true} {...this.props}/>
                <CustomDivider/>
                <NewsComponent home={true} {...this.props}/>
                <CustomDivider/>
                <AthletesBirthdayList {...this.props}/>
                <CustomDivider/>
                <RatingsBlock/>
                <CustomDivider/>
                <SocialBlock/>
            </ScrollView>
        </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
     flex: 1,
     backgroundColor: '#f2f2f2',
  }
});

export default class CompetitionsList extends React.Component {

...

 render() {

        const {
            compListForHome
        } = this.props.competitions;

        return (
                <View style={styles.homeContainer}>
                    <View style={styles.headerContainer}>
                        <Text style={[styles.header, {marginRight: 'auto'}]}>СОРЕВНОВАНИЯ</Text>
                        <Text
                            style={[styles.header, {marginLeft: 'auto', color: '#2f95dc'}]}
                            onPress={() => this.props.routing('navigate', 'Competitions')}
                        >ВСЕ</Text>
                    </View>
                    <View style={{alignItems: 'center'}}>
                        <View style={styles.contentContainer}>
                             <ScrollView
                                  style={{flex: 1}}
                                  horizontal={true}
                                  showsHorizontalScrollIndicator={false}>
                                            <AnimatedComponent>
                                                <View style={styles.cardContainer}>
                                                    <View style={styles.cardWrapper}>
                                                        {
                                                            compListForHome.map(event =>
                                                                <TouchableWithoutFeedback  key={event.id} onPress={() =>  console.log(event.id)}>
                                                                    <Card
                                                                        containerStyle={styles.cardWidth}
                                                                        title={
                                                                            <View style={styles.cardTitleStyleContainer}>
                                                                                <Text numberOfLines={1} style={styles.cardTitleStyleText}>{event.name}</Text>
                                                                            </View>
                                                                        }
                                                                        imageStyle={styles.image}
                                                                        image={event.URL_logo? {uri: event.URL_logo} : SP_IMAGE}>
                                                                        <View style={styles.cardLabeledContainer}>
                                                                            <Text style={styles.cardTextLabeled} numberOfLines={1}>{dateFormatter(event.start_date)}</Text>
                                                                            <Text style={styles.cardTextLabeled} numberOfLines={1}>{dateFormatter(event.end_date)}</Text>
                                                                        </View>
                                                                        <Text style={styles.cardText} numberOfLines={1}>{getFullCourseNameByCode(event.course)}</Text>
                                                                        <Text style={styles.cardText} numberOfLines={1}>{getFullCompetitionStatusByCode(event.status)}</Text>
                                                                        {
                                                                            event.reg_status
                                                                                ? <Text style={styles.cardText} numberOfLines={1}>Регистрация: {getFullRegistrationStatusByCode(event.reg_status)}</Text>
                                                                                : null
                                                                        }
                                                                    </Card>
                                                                </TouchableWithoutFeedback>
                                                            )
                                                        }
                                                    </View>
                                                </View>
                                            </AnimatedComponent>
                           </ScrollView>
                       </View>
                    </View>
                </View>
         );

  }
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    spinContainer: {
        height: 50
    },
    overlay: {
        flex: 1,
        position: 'absolute',
        bottom: 10,
        width: SCREEN_WIDTH,
        justifyContent: 'center',
        alignItems: 'center'
    },
    filterBtn: {
        backgroundColor: '#2f95dc',
        alignSelf: 'center'
    },
    homeContainer: {
        flex: 1,
        marginHorizontal: 50
    },
    fullListContainer: {
        flex:1
    },
    headerContainer: {
        flex: 1,
        flexDirection: 'row',
        width: SCREEN_WIDTH-80
    },
    header: {
        fontSize: 17,
        color: 'rgba(96,100,109, 1)',
        lineHeight: 24,
        marginTop: 15
    },
    contentContainer: {
        flex: 1,
        marginTop: 10,
        width: SCREEN_WIDTH
    },
    cardContainer: {
        flex: 1,
        flexDirection: 'column',
        marginRight: 10
    },
    cardWrapper: {
        flex: 1,
        flexDirection: 'row'
    },
    cardTitleStyleContainer: {
        padding: 20,
        marginBottom: 15,
        borderTopStartRadius: 5,
        borderTopEndRadius: 5,
        backgroundColor: "#2f95dc",
        alignItems: 'center'
    },
    cardTitleStyleText: {
        fontSize: 16,
        lineHeight: 24,
        color: '#fff',
        fontWeight: 'bold'
    },
    cardWidth: {
        width: 250,
        height: 360,
        borderWidth: 1,
        borderRadius: 6,
        borderColor: '#ddd',
        shadowColor: '#000',
        shadowOffset: { width: 5, height: 5 },
        shadowOpacity: 0.8,
        shadowRadius: 5,
        elevation: 4,
        marginBottom: 7
    },
    image: {
        width: 100,
        height: 100,
        borderRadius: 100,
        overflow: 'hidden',
        alignSelf: 'center'
    },
    cardText: {
        color: 'rgba(96,100,109, 0.8)',
        fontSize: 14,
        lineHeight: 14,
        alignSelf: 'center',
        marginBottom: 10
    },
    cardLabeledContainer: {
        backgroundColor: 'rgba(0,0,0,0.05)',
        borderRadius: 3,
        marginTop: 10,
        marginBottom: 20,
        marginHorizontal: 30,
        padding: 5
    },
    cardTextLabeled: {
        alignSelf: 'center',
        fontSize: 15,
        color: 'rgba(96,100,109, 0.8)'
    }
});

谢谢您的帮助！