@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 MoreDir from './MoreDir';
import Page from './Page';
const Pagination = props => {
  const {
    size = 'default',
    icon = false,
    jumpBtn = false,
    simple = false,
    currentColor,
    current: currents = 1,
    total,
    pageSize = 10,
    borderColor,
    color,
    renderPages,
    onCurrent
  } = props;
  const [current, setCurrent] = useState(1);
  useEffect(() => {
    setCurrent(currents || 1);
  }, [currents]);
  /** 页码 */
  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} borderColor={borderColor} color={color} />
      <Page simple={simple} setCurrent={setCurrent} renderPages={renderPages} onCurrent={onCurrent} size={size} current={current} totalPage={Math.ceil(total / pageSize)} currentColor={currentColor} />
      <View style={{
      flexDirection: 'row'
    }}>
        <DirText onPageChange={onPageChange} size={size} direction="right" disabled={current === Math.ceil(total / pageSize)} icon={icon} borderColor={borderColor} color={color} />
        {jumpBtn === true && <MoreDir setCurrent={setCurrent} size={size} current={Math.ceil(total / pageSize)} borderColor={borderColor} color={color} />}
      </View>
    </View>;
};
const styles = StyleSheet.create({
  pagination: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    flexDirection: 'row'
  }
});
export default Pagination;