Реагировать на активный индекс элемента карусели

Question

Я только начал изучать React Native и хочу сделать экран spla sh, содержащий ползунок с точками. Но когда я прокручиваю прокрутку, активная точка не меняется должным образом. Мой компонент слайдера, как показано ниже

export default function Slider() {
  const [active, setActive] = useState(0);

  const onChange = ({ nativeEvent }) => {
    const active = Math.floor(
      nativeEvent.contentOffset.x / nativeEvent.layoutMeasurement.width
    );

    setActive({ active });

    console.log(active);
   
  };

  return (
    <View style={styles.container}>
      <ScrollView
        onMomentumScrollEnd={onChange}
        horizontal
        pagingEnabled
        showsHorizontalScrollIndicator={false}
      >
        {dummyData.map((item, index) => {
          return (
            <SliderItem
              key={index}
              title={item.title}
              image={item.url}
              description={item.description}
            />
          );
        })}
      </ScrollView>
      <View style={styles.dotView}>
        {dummyData.map((k, i) => (
          <View
            key={i}
            style={{
              backgroundColor: i === active ? "red" : "blue", // My problem is here
              height: 10,

              width: 10,

              margin: 8,
              borderRadius: 6,
            }}
          />
        ))}
      </View>
    </View>
  );
}

Answer 1

Измените setActive({ active }); на setActive(active);