React native 对于平面列表分页，反应本机动画无法平滑工作

我正在创建分页点以显示平面列表内容计数，但问题是翻译不流畅。这是我的点代码

Dots.js

import React from 'react';
import {
  Animated,
  StyleSheet,
  useWindowDimensions,
  View,
  ViewStyle,
} from 'react-native';
import { colors } from '../../global_constants/colors';
export interface ScalingDotProps {
  data: Array<Object>;
  scrollX: Animated.Value;
  containerStyle?: ViewStyle;
  dotStyle?: ViewStyle;
  inActiveDotOpacity?: number;
  inActiveDotColor?: string;
  activeDotScale?: number;
  activeDotColor?: string;
}

export const ScalingDot = ({
  scrollX,
  data,
  dotStyle,
  containerStyle,
  inActiveDotOpacity,
  inActiveDotColor,
  activeDotScale,
  activeDotColor,
}: ScalingDotProps) => {
  const { width } = useWindowDimensions();

  const defaultProps = {
    inActiveDotColor: inActiveDotColor || '#347af0',
    activeDotColor: activeDotColor || '#347af0',
    animationType: 'scale',
    inActiveDotOpacity: inActiveDotOpacity || 0.5,
    activeDotScale: activeDotScale || 1.4,
  };

  return (
    <View style={[styles.containerStyle, containerStyle]}>
      {data.map((_, index) => {
        const inputRange = [
          (index - 1) * width,
          index * width,
          (index + 1) * width,
        ];

        const colour = scrollX.interpolate({
          inputRange,
          outputRange: [
            defaultProps.inActiveDotColor,
            defaultProps.activeDotColor,
            defaultProps.inActiveDotColor,
          ],
          extrapolate: 'clamp',
        });
        const opacity = scrollX.interpolate({
          inputRange,
          outputRange: [
            defaultProps.inActiveDotOpacity,
            1,
            defaultProps.inActiveDotOpacity,
          ],
          extrapolate: 'clamp',
        });
        const scale = scrollX.interpolate({
          inputRange: inputRange,
          outputRange: [1, defaultProps.activeDotScale, 1],
          extrapolate: 'clamp',
        });

        return (
          <Animated.View
            key={`dot-${index}`}
            style={[
              styles.dotStyle,
              { opacity },
              { transform: [{ scale }] },
              dotStyle,
              {backgroundColor: colors.primary}
              // { backgroundColor: colour },
            ]}
          />
        );
      })}
    </View>
  );
};

const styles = StyleSheet.create({
  containerStyle: {
    position: 'absolute',
    bottom: 20,
    paddingBottom: 2,
    flexDirection: 'row',
    alignSelf: 'center',
  },
  dotStyle: {
    width: 5,
    height: 5,
    borderRadius: 5/2,
    marginHorizontal: 5,
  },
});

从“React”导入React；
进口{
有生气的
样式表，
使用窗口尺寸，
看法
视图样式，
}从“反应本机”；
从“../../global_常量/颜色”导入{colors}；
导出接口ScalingDotProps{
数据：数组；
scrollX：动画。值；
容器样式？：视图样式；
点样式？：视图样式；
不活动产能？：数量；
InactiveVedotColor？：字符串；
activeDotScale？：数字；
activeDotColor？：字符串；
}
导出常量缩放点=({
scrollX，
数据，
dotStyle，
集装箱运输，
无能，
不活跃的颜色，
activeDotScale，
activeDotColor，
}：ScalingDotProps）=>{
const{width}=useWindowDimensions（）；
const defaultProps={
InactiveVedotColor:InactiveVedotColor | |‘#347af0’，
activeDotColor:activeDotColor | |‘#347af0’，
animationType:“缩放”，
不动产能力：不动产能力| | 0.5，
activeDotScale:activeDotScale | | 1.4，
};
返回(
{data.map（（_，index）=>{
常量输入范围=[
（索引-1）*宽度，
索引*宽度，
（索引+1）*宽度，
];
const color=scrollX.interpolate({
输入范围，
输出范围：[
defaultProps.inActiveDotColor，
defaultProps.activeDotColor，
defaultProps.inActiveDotColor，
],
外推：“夹具”，
});
常量不透明度=scrollX.interpolate({
输入范围，
输出范围：[
defaultProps.inactivedocapacity，
1.
defaultProps.inactivedocapacity，
],
外推：“夹具”，
});
常量比例=滚动x.interpolate({
输入范围：输入范围，
outputRange:[1，defaultProps.activeDotScale，1]，
外推：“夹具”，
});
返回(
);
})}
);
};
const styles=StyleSheet.create({
集装箱运输方式：{
位置：'绝对'，
底数：20，
填充底部：2，
flexDirection:'行'，
对齐自我：“中心”，
},
点样式：{
宽度：5，
身高:5,，
边界半径：5/2，
marginHorizontal:5，
},
});

我希望动画以60帧/秒的速度工作，我使用flatlist渲染数据并启用分页

使用flatlist的scrollX值更改dots活动状态。

解决方案是：

useNativeDriver:true