Блог

Я реализую слайдер, используя FlatList — React Native,

У меня есть два случая

• нажмите, чтобы перейти к следующему слайду
• нажмите, чтобы пропустить и перейти к последнему элементу в слайдере

итак, сначала я должен знать текущий индекс, в котором я нахожусь, и на его основе я перехожу к следующему элементу,

и чтобы получить этот индекс, я должен использовать onMomentumScrollEnd , но проблема в том, что он не запускается в Android

    onMomentumScrollEnd={(ev) => {
          offsetRef.current = ev.nativeEvent.contentOffset.x;
          console.log('ev', ev.nativeEvent.contentOffset.x);
          console.log(' offsetRef.current', offsetRef.current);
    }}


const NextButton = () => {
  return (
    <TouchableOpacity
      onPress={() =>
        flatListRef.current.scrollToOffset({
          animated: true,
          offset: offset.current   width,
        })
      }>
      <Text style={{color: '#fff', fontSize: 16}}>Next</Text>
    </TouchableOpacity>
  );
};


const _renderSkipButton = () => {
    return (
      <AnimatedButton
        onPress={() => {
          // animation();
          // setDoneBtn((prev) => !prev);
          flatListRef.current.scrollToIndex({
            animated: true,
            index: data.length - 1, // Not work!
          });
        }}
        style={[styles.buttonCircle, {transform: [{translateY: skipButton}]}]}>
        <Text>skip</Text>
      </AnimatedButton>
    );
  };




 <Animated.FlatList
        data={data.reverse()}
        keyExtractor={(item) => item.title}
        horizontal
        ref={flatListRef}
        showsHorizontalScrollIndicator={false}
        pagingEnabled
        scrollEventThrottle={16}
        contentContainerStyle={{
          paddingBottom: 100,
          flexDirection: 'row-reverse',
        }}
        onScroll={Animated.event(
          [{nativeEvent: {contentOffset: {x: scrollX}}}],
          {useNativeDriver: false},
        )}
        onMomentumScrollEnd={(ev) => {
          const index = Math.round(ev.nativeEvent.contentOffset.x / ITEM_WIDTH);
          const newIndex = I18nManager.isRTL ? data.length - index - 1 : index;
          indexItem.current = newIndex;
          console.log('onMomentumScrollEnd', newIndex);
        }}
        renderItem={....}
       />
 

ЖИВЫЕ КОНЦЕРТЫ

onMomentumScrollEnd вызывается, когда вы проводите пальцем, я думаю, вам нужно управлять этим вручную.