Вопрос
Как люди реализуют бесконечное количество страниц для динамического пролистывания?
Подробности
Если приложение отображает страницу за день, можно ожидать, что она проведет пальцем вправо за предыдущий день и влево за следующий день.
Например, приложение FitNotes делает это, по-видимому, просто: 
Сдвиг вправо / влево аналогичен нажатию кнопки 5/6.и отображает уже обработанные страницы.В то же время отображаются и новые страницы для соседних дней.
Сначала я подумал, что это то, что вы будете делать, используя карусель, например, используя реагировать-нативно-привязывать-карусель библиотека.Я представлял что-то похожее на приведенный ниже пример, но отображал страницу, используя переменные состояния вместо массива изображений.
Итак, если бы я хотел визуализироватьстраница с датой вверху, у меня будет массив как часть состояния, например:
carouselElements: [ '2019/01/21', '2019/01/22', '2019/01/23']
Врезанный в карусель ниже, я бы вернул три страницы каждая с датой, отображаемой вthe top.
<Carousel
ref={(c) => { this._carousel = c; }}
data={this.props.carouselElements}
renderItem={this.renderDay}
sliderWidth={sliderWidth}
itemWidth={sliderWidth}
enableSnap
firstItem={1}
initialNumToRender={3}
maxToRenderPerBatch={3}
onBeforeSnapToItem={(index) => this.changeEvent(index)}
useScrollView/>
Задача 1: бесконечно растущий массив
Вы можете начать с Day X и визуализировать смежные два дня раньше времени.Если я проведу пальцем влево, вы получите доступ к Day X+1 и concat Day X+2 к концу массива, а также выполните рендеринг в тот же день.
Массив становится: [ 'Day X-1', 'Day X', 'Day X+1', 'Day X+2']
Дляя могу продолжать сравнивать индекс с 3-дневным окном и отображать только выбранный день и два соседних дня.Но массив будет расти бесконечно, и ваш код будет в лучшем случае O (n).
Проблема 2: Индексирование
a) Предшествующие элементы:
Вы можете начать с Day X и затем провести вправо.Вы сейчас показываете Day X-1.Вы добавляете Day X-2 в начало массива и визуализируете его, чтобы подготовиться ко второму пролистыванию вправо.Проблема в том, что вы добавили элемент с индексом 0. Ваша система указывает на состояние индекса 0, когда он изменился с Day X-1 на Day X-2, поэтому на странице теперь отображается Day X-2.
, т.е.вместо того, чтобы вернуться назад на один день, когда вы проведете пальцем вправо, вы вернетесь назад на 2 дня с каждым проведением.
b) Удаление элементов
Если я удаляю элементчтобы сохранить массив маленьким, все меняется, но индекс остается прежним.Индекс теперь указывает на элемент, отличный от предназначенного в массиве, и это отражается на отображаемой странице до того, как индекс может быть исправлен.
Таким образом, мой вопрос: Как люди реализуют динамическийрендеринг страниц до бесконечности с перелистыванием страниц?Кажется, что во многих приложениях он есть, и я не могу найти никого, кто бы говорил об этом.
Правки
РЕДАКТИРОВАТЬ 1: Добавлены изображения с сопровождающими правками, чтобы лучше объяснить мою проблему.
РЕДАКТИРОВАТЬ 2: У меня есть рабочая реализация с реаги-native-swiper , который в основном принимает массивный массив и отображает пакет слайдов, непосредственно примыкающих к отображаемой странице.
<Swiper style={styles.wrapper}
showsButtons={false}
index={currentDateIndex}
loadMinimal={true}
loadMinimalSize={1}
showsPagination={false}
loop={false}
onIndexChanged={(index) => dispatch(changeSelectedDayByIndex(index))}
>
{dates.map((item) =>
this.renderDay(item)
)
}
</Swiper>
Однако команда dates.map приводит к значительному снижению производительности при запуске.
Редактировать 3: Использование команды slice в массиве дат перед отображением не похоже на вариант, потому что я выполняю рендеринг во время существующего перехода состояния ..