react-native - React Native Scrollview scroll back to first image

Question

Trying to implement a image slider in React native using scrollview. The scrollview should scroll back to the first image if the user scrolls right from the last image. Implementing as a functional component. How do i detect that the user has scrolled ? I have tried using onScroll method of ScrollView , but it fires too many events. I want to basically reset the scrollview to first image if the user scrolls past the last image.

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 而不是滚动视图，

        <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