Android上的React Native App中的故障动画

问题描述

我的目标是，当用户将列表向下滚动到固定位置时，上面的视图将上升。动画在IOS上运行非常流畅，但是在Android上，当我稍微滚动列表时，它会引起非常烦人的故障。故障既发生在Android模拟器上，也发生在我的Android设备上

这是我的代码：

...
const scorllY = useRef(new Animated.Value(0)).current;
    const navigation = useNavigation();

    const getTranslatedYList =
        scorllY.interpolate({
            inputRange: [0,50],outputRange: [0,-(SCREEN_HEIGHT / 15.9 + 35)],extrapolate: 'clamp'

        })
    const getTranslatedYHeader = scorllY.interpolate({
        inputRange: [0,-SCREEN_HEIGHT / 15.9],extrapolate: 'clamp'

    })


    const getTranslatedYTimer =
        scorllY.interpolate({
            inputRange: [0,-(35 + SCREEN_HEIGHT / 15.9)],extrapolate: 'clamp'

        })

    const getCounterOpacity =
        scorllY.interpolate({
            inputRange: [0,outputRange: [1,0],extrapolate: 'clamp'

        })
...

            <View style={{ width: '100%',height: '100%',}}>
                <Animated.View style={{ ...styles.header,transform: [{ translateY: getTranslatedYHeader }],opacity: getCounterOpacity }}>
                    <TouchableOpacity style={styles.backButton} onPress={() => navigation.goBack()}>
                        <IconBack width={10} height={18} />
                    </TouchableOpacity>
                    <Text style={{ ...RootStyle.headerTitle,alignSelf: 'center' }}>Bảng xếp hạng</Text>
                </Animated.View>
                <Animated.View style={{ ...styles.gradeButton,transform: [{ translateY: getTranslatedYHeader }] }}>
                    <TouchableOpacity style={styles.button} onPress={() => setGrade(1)}>
                        <Text style={styles.buttonTitle}>Lớp 10</Text>
                    </TouchableOpacity>
                    <View style={RootStyle.verticalDivider}></View>
                    <TouchableOpacity style={styles.button} onPress={() => setGrade(2)}>
                        <Text style={styles.buttonTitle}>Lớp 11</Text>
                    </TouchableOpacity>
                    <View style={RootStyle.verticalDivider}></View>
                    <TouchableOpacity style={styles.button} onPress={() => setGrade(3)}>
                        <Text style={styles.buttonTitle}>Lớp 12</Text>
                    </TouchableOpacity>
                </Animated.View>
                <Animated.View style={{ ...styles.update,opacity: getCounterOpacity,transform: [{ translateY: getTranslatedYHeader }] }}>
                    <Text style={styles.updateInfo}>Cập nhật sau:</Text>
                    <CountDown size={15} until={1000} digitStyle={{ backgroundColor: 'transparent',width: 25 }} style={{ marginTop: 0 }}
                        digitTxtStyle={{ color: '#00AEEF',fontFamily: Platform.OS == 'android' ? 'SF-UI-Text-Regular' : 'SFUIText-Regular',fontSize: 17 }} timetoShow={['H','M','S']} timeLabels={{ h: null,m: null,s: null }}
                        showSeparator={true} separatorStyle={{ color: '#00AEEF',fontSize: 17,marginTop: 2 }} />
                </Animated.View>
                <Animated.View style={{ ...styles.timeMode,transform: [{ translateY: getTranslatedYTimer }] }}>
                    <TouchableOpacity style={styles.smallerButton} onPress={() => setTime('DAY')}>

                        {time == 'DAY' ? <LinearGradient style={{ width: '100%',justifyContent: 'center',alignItems: 'center' }} start={{ x: 1,y: 1 }} end={{ x: 1,y: 0 }}
                            locations={[0.0,1.0]} colors={['#00AEEF','#08C8FF']}>
                            <Text style={{ ...styles.buttonTitle,color: 'white' }}>Ngày</Text>
                        </LinearGradient> : <Text style={styles.buttonTitle}>Ngày</Text>}
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.smallerButton} onPress={() => setTime('WEEK')}>
                        {time == 'WEEK' ? <LinearGradient style={{ width: '100%',color: 'white' }}>Tuần</Text>
                        </LinearGradient> : <Text style={styles.buttonTitle}>Tuần</Text>}
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.smallerButton} onPress={() => setTime('MONTH')}>
                        {time == 'MONTH' ? <LinearGradient style={{ width: '100%',color: 'white' }}>Tháng</Text>
                        </LinearGradient> : <Text style={styles.buttonTitle}>Tháng</Text>}
                    </TouchableOpacity>
                </Animated.View>
                <Animated.View style={{ ...styles.rankingContainer,transform: [{ translateY: getTranslatedYList },] }}>
                    <LinearGradient style={styles.linear} start={{ x: 1,y: 0 }}
                        locations={[0.0,'#08C8FF']}>
                        {/* <ScrollView style={styles.scrollList} scrollEnabled={true} showsverticalScrollIndicator={false}>
                    {rankList.map((item) => (
                        <UserRankInfo key={item.id} />
                    ))}
                </ScrollView> */}
                        <Animated.FlatList data={rankList} keyExtractor={(item,index) => item + index}
                            renderItem={({ item,index }) => (
                                <UserRankInfo id={index} username={item.pupil_account.fulname} point={item.score} />
                            )} showsverticalScrollIndicator={false} scrollEventThrottle={1}
                            onScroll={Animated.event(
                                [
                                    {
                                        nativeEvent: { contentOffset: { y: scorllY } },}
                                ],{ useNativeDriver: false }
                            )} />

                    </LinearGradient>
                </Animated.View>


            </View>
...

这是Android上的小故障

您能帮我解决此问题吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）