在ScrollView或FlatList中每5秒自动滚动一次项目

Question

我有一个可以在滚动视图中换行的组件。我想每5秒钟滚动一次自动变速器，就像侧滑一样。

这是我的代码：

<View style={{ marginTop: 20, flexDirection: 'row' }}>
<ScrollView style={{ padding: 10 }} horizontal={true}>
{Data.map((data, index) => {
return (
<View key={index}>
<CustomerComp
imgLink={data.imgLink}
customerText={data.customerText}
customerName={data.customerName}
/>
</View>
)
})}
</ScrollView>
</View>

谢谢

Answer 1

您可以将flatlist与scrollToIndex(params(一起使用；方法例如

const ref = useRef();
const [index, setIndex] = useState(0);
useEffect(()=> {
const interval = setInterval(() => {
ref?.current?.scrollToIndex({index, animated: true});
setIndex(index + 1);
}, 5000);
return () => clearInterval(interval);
},[]);
return(
<View style={{ marginTop: 20, flexDirection: 'row' }}>
<FlatList ref={ref} data={Data} {...props} />
</View>
);