反应本机轮播项目活动索引

Question

我刚开始学习 React Native，我想制作一个包含带点滑块的启动画面。但是当我滚动滚动视图时，活动点不会正确更改。我的滑块组件如下所示

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);

反应本机轮播项目活动索引

React native carousel item active index

react-native

carousel

splash-screen