React Native Scrollview прокрутка назад к первому изображению - PullRequest
Новая
       4

React Native Scrollview прокрутка назад к первому изображению

0 голосов
/ 06 февраля 2020

Попытка реализовать слайдер изображений в React native с использованием scrollview. При просмотре прокрутки следует вернуться к первому изображению, если пользователь прокручивает вправо от последнего изображения. Реализация как функциональный компонент. Как я могу обнаружить, что пользователь прокрутил? Я попытался использовать метод 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>

1 Ответ

0 голосов
/ 06 февраля 2020

Пожалуйста, используйте Flatlist вместо scrollview, 

        <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
...