React Native Scrollview 滚动回第一张图片

Question

尝试使用 scrollview 在 React native 中实现图像滑块。如果用户从最后一个图像向右滚动，则滚动视图应滚动回第一个图像。作为功能组件实现。如何检测用户已滚动？我尝试过使用 ScrollView 的 onScroll 方法，但它触发了太多事件。如果用户滚动到最后一个图像，我想基本上将滚动视图重置为第一个图像。

const scrollRef = useRef()
<View style={styles.container}>
<ScrollView
ref={ref => { scrollRef.current = ref }}
horizontal={true} 
showsHorizontalScrollIndicator={false}
>
{images.map((image, imageId) => {
return (
<TouchableHighlight
key={imageId}
underlayColor='red'
>
<Image source={{uri: image}} style={{width:width, aspectRatio: 3, resizeMode: 'cover'}} />
</TouchableHighlight>
)
})}
</ScrollView>
</View>

Answer 1

请使用平面列表而不是滚动视图，

<FlatList
ref={(ref) => {
flatListRef = ref;
}}
horizontal={true}
pagingEnabled={true}
data={imageArray} //files
legacyImplementation={true}
showsHorizontalScrollIndicator={false}
renderItem={({ item, index }: any) =>
(
<View
style={{
width: width,
height: '100%',
justifyContent: 'center',
// alignItems: 'center',
backgroundColor: 'white'
}}
>
<Image source={{ uri: item.uri }} style={{ width: '100%', 
height: item.height }}></Image>
<Text style={{
paddingTop: 14, paddingLeft: 20, fontFamily: 'Roboto- 
Regular', fontSize: 16, color: 'rgb(74,74,74)'
}}>{description + " " + item.width + 'x' + item.height + 
'.jpg'}</Text>
</View>
)}
/>```
please try this code, hope this works for you