¿Cómo crear una tabla en react-native?

React native es un marco desarrollado por Facebook para crear aplicaciones de estilo nativo para iOS y Android bajo un lenguaje común, JavaScript. Inicialmente, Facebook solo desarrolló React Native para admitir iOS. Sin embargo, con su compatibilidad reciente con el sistema operativo Android, la biblioteca ahora puede generar interfaces de usuario móviles para ambas plataformas.

requisitos previos:

• Conocimientos básicos de reactjs .
• Html, css y javascript con sintaxis ES6.
• NodeJs debe estar instalado en su sistema ( install ).
• Jdk y Android Studio para probar su aplicación en el emulador ( instalar ).

Enfoque: en este artículo, crearemos una tabla simple en react-native que contendrá el nombre, la edad y los detalles de la comida favorita de una persona. Usaremos la biblioteca react-native-paper para crear una tabla. 

A continuación se muestra la implementación paso a paso:

Paso 1: Cree un proyecto en react-native usando el siguiente comando:

npx react-native init DemoProject

Paso 2: instale el papel nativo reactivo con el siguiente comando:

npm install react-native-paper

Paso 3: Inicie el servidor usando lo siguiente:

npx react-native run-android

Paso 4: Ahora ve a tu proyecto y crea una carpeta de componentes. Dentro de la carpeta de componentes, cree un archivo DataTable.js.

Estructura del proyecto: Se verá así.

Implementación: Anote el código en los archivos respectivos.

En DataTable.js, hemos importado el componente DataTable de la biblioteca react-native-paper.

• Para mostrar el nombre de la columna, usaremos el componente DataTable.Header.
• Para mostrar el título en el encabezado de la tabla, tenemos el componente DataTable.Title.
• Para mostrar una fila dentro de una tabla, usaremos el componente DataTable.Row.
• Para mostrar una celda dentro de una tabla, tenemos el componente DataTable.Cell.

Nombre de archivo: DataTable.js

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

Nombre de archivo: App.js

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

Paso para ejecutar la aplicación: Ejecute la aplicación usando el siguiente comando:

npx react-native run-android

Producción:

Referencia: https://callstack.github.io/react-native-paper/data-table-title.html