tvt-pagination

A long list can be divided into several pages using Pagination, and only one page will be loaded at a time.

Getting started

yarn add tvt-pagination

Example

import React from 'react';
import Pagination from 'tvt-pagination';

export default () => (
  <Pagination
    defaultCurrent={1}
    total={50}
  />
);

import React from 'react';
import { Text } from 'react-native';
import Pagination from 'tvt-pagination';

export default () => (
  <Pagination
    size="small"
    total={50}
    prevIcon={
      <Text>Prev</Text>
    }
    nextIcon={
      <Text>Next</Text>
    }
  />
);

import React from 'react';
import Pagination from 'tvt-pagination';

export default () => (
  <Pagination
    total={50}
    defaultCurrent={1}
    defaultPageSize={5}
    onChange={(page, pageSize) => alert(`${page} ${pageSize}`)}
  />
);

API

| Property | Description | Type | Default | | ----------- | ----------- | ----------- | ----------- | | defaultCurrent | Default initial page number | number | 1 | | defaultPageSize | Default number of data items per page | number | 10 | | disabled | Disable pagination | boolean | | | total | Total number of data items | number | 0 | | onChange | Called when the page number is changed, and it takes the resulting page number and pageSize as its arguments | function(page, pageSize) | | | size | Specify the size of Pagination, can be set to small | default | middle | small | | borderColor | Border color button pagination | string | #d9d9d9 | | borderColorActive | Border color button current pagination | string | #1890ff | | activeOpacity | Determines what the opacity of the wrapped view should be when touch is active | number | 1 | | prevIcon | Set the icon prev | ReactNode | | | nextIcon | Set the icon next | ReactNode | | | styleBox | Style for box button | ViewStyleProps | | | style | Style for Pagination | ViewStyleProps | | | testID | Used to locate this view in end-to-end tests | string | |