如何在 react-native 中创建表？

React native 是 Facebook 开发的一个框架，用于在一种通用语言 JavaScript 下为 iOS 和 Android 创建原生风格的应用程序。最初，Facebook 只开发了 React Native 来支持 iOS。但是，由于最近支持 Android 操作系统，该库现在可以为这两个平台呈现移动 UI。

先决条件：

• reactjs的基础知识。
• 具有 ES6 语法的 Html、css 和 javascript。
• NodeJs 应该安装在您的系统中（安装）。
• Jdk 和 android studio 用于在模拟器上测试您的应用程序（安装）。

方法：在本文中，我们将在 react-native 中创建一个简单的表格，其中包含一个人的姓名、年龄和最喜欢的食物的详细信息。我们将使用react-native-paper 用于创建表的库。

下面是分步实现：

第 1 步：使用以下命令在 react-native 中创建一个项目：

npx react-native init DemoProject

第 2 步：使用以下命令安装 react-native paper：

npm install react-native-paper

第 3 步：使用以下命令启动服务器：

npx react-native run-android

第 4 步：现在转到您的项目并创建一个组件文件夹。在 components 文件夹中，创建一个文件 DataTable.js。

项目结构：它看起来像这样。

实现：在各自的文件中写下代码。

在 DataTable.js 中，我们从 react-native-paper 库中导入了DataTable组件。

• 要显示列名，我们将使用 DataTable.Header 组件。
• 为了在表头中显示标题，我们有 DataTable.Title 组件。
• 要在表格中显示行，我们将使用 DataTable.Row 组件。
• 为了在表格中显示单元格，我们有 DataTable.Cell 组件。

文件名：DataTable.js

Javascript

import React from 'react';
import { StyleSheet } from 'react-native';
import { DataTable } from 'react-native-paper';
  
const TableExample = () => {
  return (
    
      
        Name
        Favourite Food
        Age
      
      
        Radhika
        Dosa
        23
      
  
      
        Krishna
        Uttapam
        26
      
      
        Vanshika
        Brownie
        20
      
      
        Teena
        Pizza
        24
      
    
  );
};
  
export default TableExample;
  
const styles = StyleSheet.create({
  container: {
    padding: 15,
  },
  tableHeader: {
    backgroundColor: '#DCDCDC',
  },
});

文件名：App.js

Javascript

import React from 'react';
import type { Node } from 'react';
import { View } from 'react-native';
  
import TableExample from './components/DataTable';
  
const App: () => Node = () => {
  return (
    
      
    
  );
};
  
export default App;

运行应用程序的步骤：使用以下命令运行应用程序：

npx react-native run-android

输出：

参考： https://callstack.github.io/react-native-paper/data-table-title.html