如何在 React Native Paper DataTable 中分页？

Question

我无法找到足够的信息来使用 React Native Paper DataTable Pagination。这些文档非常薄弱，而且只有几个关于该主题的视频没有给我提供我需要的信息。

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 有经验的人来向我解释一下。

Answer 1

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

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

{values?.map((value, index) => <DataTable.Row key={index}> {headers?.map(({ title }) => <DataTable.Cell key={title}>{value[title ]}</DataTable.Cell>)} </DataTable.Row>)}

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

value.slice(page * itemsPerPage, page * itemsPerPage + itemsPerPage).map((value) => <DataTable.Row key={index}>{headers?.map(({ title }) => <DataTable.Cell key ={title}>{value[title]}</DataTable.Cell>)}</DataTable.Row>)})

我无法在您的代码上测试它的工作原理，因为您没有提供沙箱，但我使用 React Native 论文中提供的数据制作了一个示例。请参阅此处的工作示例：数据分页示例