Как добавить таблицу в React Native?

Опубликовано: 11 Августа, 2022

React Native — это программная среда пользовательского интерфейса с открытым исходным кодом, созданная Meta Platforms, Inc. Она используется для разработки приложений для Android, Android TV, iOS, macOS, tvOS, Интернета, Windows и UWP, позволяя разработчикам использовать платформу React вместе с со встроенными возможностями платформы.

В этой статье мы научимся создавать таблицы в React Native.

Создание приложения React Native:

Шаг 1: Мы будем использовать expo для создания нативного приложения для реагирования. Установите expo-cli, используя приведенную ниже команду в терминале.

npm install -g expo-cli

Шаг 2: Создайте нативный проект с помощью expo.

expo init "gfg"

Шаг 3: Теперь перейдите к созданному проекту, используя приведенную ниже команду.

cd "gfg"

Структура проекта: Проект будет выглядеть следующим образом:

Добавление всплывающего уведомления: мы можем легко добавить таблицы в наше родное приложение для реагирования. Для этого мы будем использовать модуль react-native-table-component react-native.

Шаг 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 (
        <View style={{ marginTop: 200 }}>
            <Text style={{ fontSize: 18 }}>
                GeeksforGeeks React Native Table</Text>
            <Table borderStyle={{ borderWidth: 2, 
                borderColor: "#c8e1ff" }}>
                <Row data={header} />
                <Rows data={data} />
            </Table>
        </View>
    );
};
  
export default GfGApp;

Здесь сначала мы создаем разные постоянные переменные для хранения значения заголовка и данных. Затем мы используем компоненты Table и Row для отображения данных.

Запустите приложение: теперь запустите приложение, используя приведенную ниже команду в терминале.

npm run web

Выход:

JavaScript

Как добавить таблицу в React Native?

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ