React Native Bidirectional Looping FlatList

Question

Я пытаюсь создать компонент боковой панели, похожий на карусель в своем поведении.Это будет иметь фиксированные данные с максимум 10 пунктов.В настоящее время я основываю свою реализацию на этом ответе .Мои требования к этой боковой панели следующие:

• Двунаправленный
• Цикл фиксированных данных
• onПресс каждого элемента прокручивается вверх

Я пытался реализовать это с помощью реагировать-родной-оснастка-карусель , но я не смог получить правильное поведение прокрутки.Я также пытался использовать https://github.com/prateek3255/react-native-infinite-looping-scroll/, но производительность была очень плохой.Я попытался оптимизировать поведение onScroll, но решил отказаться от этого и начать с исходной базы, которую я упомянул выше .

Мой текущий компонент InfiniteScroll:

import React, { Component } from "react";
import { FlatList } from "react-native";

export default class InfiniteScroll extends Component {
    constructor(props) {
        super(props);
        this.state = {};
        this._flatList = null;
    }

    onScrollToIndex = index => {
        this._flatList.scrollToIndex({ animated: true, index: index });
    };

    getWrappableData = data => {
        return [...data, ...data];
    };

    render = () => (
        <FlatList
            {...this.props}
            keyExtractor={index => index.toString()}
            ref={el => (this._flatList = el)}
            onLayout={({ nativeEvent }) => {
                const { width, height } = nativeEvent.layout;
                this.setState({
                    width,
                    height
                });
            }}
            onScroll={({ nativeEvent }) => {
                const { x } = nativeEvent.contentOffset;
                if (x === 730) {
                    this._flatList.scrollToOffset({ x: 0, animated: false });
                }
            }}
            data={this.getWrappableData(this.props.data)}
            pagingEnabled={true}
            scrollEnabled={false}
        />
    );
}

Мой текущийРеализация выглядит так, как показано ниже, и в настоящее время может прокручивать, но не вечно, только один дополнительный цикл.Моя цель состояла в том, чтобы вычислить, как далеко была прокручена, и продолжать добавлять одни и те же данные снова и снова.

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