如何在 React Native Paper DataTable 中分页？答案

【问题标题】：How do I paginate in React Native Paper DataTable?如何在 React Native Paper DataTable 中分页？
【发布时间】：2021-06-01 01:22:54
【问题描述】：

我无法找到足够的信息来使用 React Native Paper DataTable 分页。文档非常少，只有少数关于该主题的视频没有提供我需要的信息。

import 'react-native-gesture-handler';
import React, { useEffect, useState } from 'react';
import { View, Text, Button, TextInput, ActivityIndicator } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer'
import { DataTable, page, setPage, setItemsPerPage, optionsPerPage, itemsPerPage } from 'react-native-paper';

const Drawer = createDrawerNavigator();

function SearchComponent() {
  return (
    <View style={{ flex: 1 }}>Search Bar</View>
  );
}

function TableComponent({ headers, values }) {
  if (!headers || !values) return null;
  const optionsPerPage = [0];
  const [page, setPage] = useState(0);
  const [itemsPerPage, setItemsPerPage] = useState(optionsPerPage[10]);
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <DataTable.Row style={{ width: 1000 }}>
        <DataTable.Cell text>First Name</DataTable.Cell>
        <DataTable.Cell text>Last Name</DataTable.Cell>
        <DataTable.Cell text>Provider Email</DataTable.Cell>
        <DataTable.Cell text>Review</DataTable.Cell>
        <DataTable.Cell text>Rating</DataTable.Cell>
        <DataTable.Cell text>Review Completed</DataTable.Cell>
      </DataTable.Row>
      <DataTable style={{ width: 1000 }}>
        {/* {headers?.map(({ title, numeric }) => <DataTable.Title key={title} numeric={numeric}>{title}</DataTable.Title>)} */}
        {values?.map((value, index) => <DataTable.Row key={index}>
          {headers?.map(({ title }) => <DataTable.Cell key={title}>{value[title]}</DataTable.Cell>)}
        </DataTable.Row>)}
        <DataTable.Pagination
          page={page}
          numberOfPages={1000}
          onPageChange={(page) => setPage(page)}
          label="1-2 of 1000"
          optionsPerPage={optionsPerPage}
          itemsPerPage={itemsPerPage}
          setItemsPerPage={setItemsPerPage}
          optionsLabel={'Rows per page'}
        />
      </DataTable>
    </View>
  );
}

我一直在搞乱 DataTable.Pagination 组件中的数字，但我所做的任何更改都没有任何视觉效果。我真的可以请有 React Native Paper 经验的人向我解释一下。

【问题讨论】：

有什么解决办法吗？

标签： react-native pagination react-native-paper

【解决方案1】：

这是因为 DataTable.Pagination 下没有处理行的道具。 DataTable.Pagination 只处理分页数据，与行无关。显示行由 DataTable.Rows 处理。这是您需要在映射数据以供显示之前过滤数据。

我猜这个处理显示代码中的行。

{values?.map((value, index) => {headers?.map(({ title }) => {value[title]})} )}

首先使用切片过滤/分离值，然后再将其映射出来以供显示。你可以使用这样的代码。

values.slice(page * itemsPerPage, page * itemsPerPage + itemsPerPage).map((value) => {headers?.map(({ title }) => {value[title]})})})

我无法在您的代码上测试此功能，因为您没有提供沙箱，但我使用 react native paper 中提供的数据制作了一个示例。在此处查看工作示例：Data pagination sample

【讨论】：