我刚开始学习 React Native,我想制作一个包含带点 slider 的启动画面。但是当我滚动 ScrollView 时,事件点不会正确更改。我的 slider 组件如下所示
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>
);
}
最佳答案
将 setActive({ active });
更改为 setActive(active);
关于react-native - react native 轮播项目事件索引,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62495509/