如何在 React Native 中添加表格？

React Native 是由 Meta Platforms, Inc. 创建的开源 UI 软件框架。它用于开发适用于 Android、Android TV、iOS、macOS、tvOS、Web、Windows 和 UWP 的应用程序，使开发人员能够同时使用 React 框架具有本机平台功能。

在本文中，我们将学习如何在 React Native 中创建表

创建 React Native 应用程序：

第 1 步：我们将使用 expo 创建 React Native 应用程序。在终端中使用以下命令安装 expo-cli。

npm install -g expo-cli

第 2 步：使用 expo 创建一个 React Native 项目。

expo init "gfg"

第 3 步：现在使用以下命令转到创建的项目。

cd "gfg"

项目结构：项目将如下所示：

添加 Toast：我们可以轻松地在我们的 react native 应用程序中添加表格。为此，我们将使用 react-native 的 react-native-table-component 模块。

第 4 步：使用以下代码安装模块。

npm install react-native-table-component

第 5 步：在App.js文件中添加以下代码。

Javascript

import React, { useState } from "react";
import { View, Text } from "react-native";
import { Table, Row, Rows } from 'react-native-table-component';
  
  
const GfGApp = () => {
    const header = ['heading 1', 'heading 2', 'heading 3']
    const data = [
        ['gfg1', 'gfg2', 'gfg3'],
        ['gfg4', 'gfg5', 'gfg6'],
        ['gfg7', 'gfg8', 'gfg9']
  
    ]
  
    return (
        
            
                GeeksforGeeks React Native Table
            
                
                
            
        
    );
};
  
export default GfGApp;

首先，我们创建不同的常量变量来存储标头的值和数据。然后我们使用 Table 和 Row 组件来显示数据。

运行应用程序：现在在终端中使用以下命令运行应用程序。

npm run web

输出：