Как показать индекс и конец плоского списка по 15 пунктов на каждом клике

Question

Мне нужно показать индекс и нижнюю часть списка, нажимая кнопки вверх и вниз.

Можно ли отображать только 15 элементов вверх или вниз. Если щелкнуть стрелку вверх или вниз.

Например, рассмотрим список из 500 элементов. Он имеет стрелки вверх и вниз. Если я щелкаю стрелку вниз один раз, мне нужно показать только 15 пунктов в первый раз, и если щелкнуть стрелку вниз, нужно отобразить следующие 15 пунктов.

Кроме того, если я нажму на стрелку вверх, она должна показать 15 элементов, а не все

В этом случае мне нужно перемещаться вверх и вниз по экрану. Любая опция для изменения scrollToIndex и scrollToEnd в Flatlist для достижения этого варианта использования

   upButtonHandler = () => {
        //OnCLick of Up button we scrolled the list to top
        this.ListView_Ref.scrollToOffset({ offset: 0,  animated: true });
      };

   downButtonHandler = () => {
    //OnCLick of down button we scrolled the list to bottom
     this.ListView_Ref.scrollToEnd({ animated: true });
    };

 <TouchableOpacity
    activeOpacity={0.5}
      onPress={this.downButtonHandler}
      style={styles.downButton}>
      <Image
        source={{uri:'https://raw.githubusercontent.com/AboutReact/sampleresource/master/arrow_down.png',
        }}
        style={styles.downButtonImage}
      />
    </TouchableOpacity>
    <TouchableOpacity
      activeOpacity={0.5}
      onPress={this.upButtonHandler}
      style={styles.upButton}>
      <Image
        source={{uri:'https://raw.githubusercontent.com/AboutReact/sampleresource/master/arrow_up.png',
        }}
        style={styles.upButtonImage}
      />
    </TouchableOpacity>

Answer 1

Вы можете slice данные, предоставляемые в FlatList каждый раз, когда нажимается кнопка. Поскольку FlatList является чистым компонентом, вам нужно пропустить extra реквизит для повторного рендеринга FlatList после нажатия кнопки * 1004. *

Ведение переменной состояния, такой как section, которая описывает, какая часть данных должна отображаться, например (0,15), (15,30), ...

Обновите эту переменную с помощью кнопок вверх и вниз, заботясь о границах, чтобы не получить плохих результатов. Это легко решить, поместив setState в условие if, чтобы оно выглядело примерно как

updateSectionLow = () => {
    const { section } = this.state;
    if (section > 0) {
      this.setState({
        section: section - 1,
      });
    }
  };
  updateSectionHigh = () => {
    const { section, data } = this.state;
    if (data.length > (section + 1) * 15) {
      this.setState({
        section: section + 1,
      });
    }
  };

, а FlatList выглядит следующим образом

<FlatList
   data={this.state.data.slice(this.state.section*15,(this.state.section+1)*15)}
   renderItem={({ item }) => {
            return (
              <View style={styles.row}>
                <Text>{item.data}</Text>
              </View>
            );
   }}
   extraData={this.state.section}
/>

Вот рабочая выставка демо

РЕДАКТИРОВАТЬ После обсуждения с сотрудником OP я немного изменил свой код.

Получить смещение после прокрутки для вертикального списка

onMomentumScrollEnd={e => this.scroll(e.nativeEvent.contentOffset)}

Внутри обработчика

this.setState({
  index: Math.floor(offset.y / (ITEM_HEIGHT+SEPARATOR_HEIGHT)),
});

если разделителя нет, вы можете поставить SEPARATOR_HEIGHT равным 0

и это только вопрос использования scrollToOffset с ref какследует

для перехода по списку с помощью ITEMS_DISP (например, 15)

this.flatListRef.scrollToOffset({
    offset:(this.state.index+ITEMS_DISP)*ITEM_HEIGHT+(this.state.index+ITEMS_DISP)*SEPARATOR_HEIGHT
  });

для перехода по списку по некоторому ITEMS_DISP

this.flatListRef.scrollToOffset({
    offset:(this.state.index-ITEMS_DISP)*ITEM_HEIGHT+(this.state.index-ITEMS_DISP)*SEPARATOR_HEIGHT
  });

Обновленная демонстрационная ссылка