在React Native中截断分页

Question

我正在研究一个实现React 16的Laravel项目，我已经编码了一个分页元素，以便在20个段中显示相当大的结果集。这将创建34个要迭代的页面，因此下面有34个分页框数据，但理想情况下，我想显示5或6，但中间用省略号表示还有更多页面。像这样：

[1] [2] [3] ... [33] [34]

当用户单击“ 3”或“ 33”或靠近椭圆形的位置时，它将继续计数以允许进一步的页面导航。

到目前为止，我已经对以下函数进行了编码，以获取所需的页面并确定当前页面是否需要样式：

// my default state params in constructor
this.state = {
    itemsPerPage: 20,
    currentPage: 0
};

// Reads the style in from the current page to render the correct paging block
_getPageNumberStyle(index) {
    return this.state.currentPage === index ? { backgroundColor: '#2d5ab4', color: '#FFFFFF' }: {};
}

// Loops through the total results to push an array of page numbers
_getPageNumbers(total) {
    const pageNumbers = [];

    for (let i = 0; i < Math.ceil(total / this.state.itemsPerPage); i++) {
        pageNumbers.push(i);
    }

    return pageNumbers;
}

然后在此处渲染元素：

const renderPageNumbers = this._getPageNumbers(total).map(number => {

    return (
        <div>
            <li
                style={this._getPageNumberStyle(number)}
                key={number}
                id={number}
                onClick={this._loadPage}
            >
                {number+1}
            </li>
        </div>
    );
});

最后将其输出到此处的页面：

<ul className={styles['pagination']}>
    {renderPageNumbers}
</ul>

这将呈现以下内容：

但是就像我说的那样，我希望它看起来像我在这篇文章顶部的建议。有办法吗？