@uiw/react-native/lib/Pagination/index.js

UIW for React Native

import React, { useState, useEffect } from 'react';
import { View, StyleSheet } from 'react-native';
import DirText from './DirText';
import Page from './Page';

const Pagination = props => {
  const {
    size = 'default',
    icon = false,
    currentColor,
    total,
    pageSize = 10
  } = props;
  const [current, setCurrent] = useState(1);
  useEffect(() => {
    setCurrent(props.current || 1);
  }, [props.current]);
  /** 页码 */

  const onPageChange = type => {
    if (current === 1 && type === 'prev') {
      return false;
    }

    if (current === Math.ceil(total / pageSize) && type === 'next') {
      return false;
    }

    const present = type === 'prev' ? current - 1 : current + 1;

    if (typeof props.onPageChange === 'function') {
      props.onPageChange(type, present);
    } else {
      setCurrent(present);
    }
  };

  return <View style={styles.pagination}>
      <DirText size={size} direction="left" disabled={current === 1} icon={icon} onPageChange={onPageChange} />
      <Page size={size} current={current} totalPage={Math.ceil(total / pageSize)} currentColor={currentColor} />
      <DirText onPageChange={onPageChange} size={size} direction="right" disabled={current === Math.ceil(total / pageSize)} icon={icon} />
    </View>;
};

const styles = StyleSheet.create({
  pagination: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    flexDirection: 'row'
  }
});
export default Pagination;