• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

326
Views
React Native: una tabla de datos simple en una FlastList, ¿cómo obtener una tabla de datos única para cada elemento?

Busco mis datos json, quiero mostrarlos con una tabla de datos. El problema es que mi componente FlatList crea una nueva tabla de datos para cada elemento, pero quiero una DataTable para todos mis elementos.

No encontré como solucionarlo. Comparto todo el código aquí. Usted me podría ayudar por favor ? Gracias

 import React, { Component } from 'react'; import { StyleSheet, Text, View, FlatList, Dimensions, ActivityIndicator } from 'react-native'; import { DataTable } from 'react-native-paper'; export default class Bien extends Component { constructor(props) { super(props); this.state = { data: [], isLoading: true }; } async getAll() { try { const response = await fetch('myJsonData'); const json = await response.json(); this.setState({ data: json.table }); } catch (error) { console.log(error); } finally { this.setState({ isLoading: false }); } } componentDidMount() { this.getAll(); } renderItem = ({ item, index }) => { return ( <View> <DataTable> <DataTable.Header> <DataTable.Title>Type</DataTable.Title> <DataTable.Title>Ville</DataTable.Title> <DataTable.Title numeric>Prix</DataTable.Title> </DataTable.Header> <DataTable.Row> <DataTable.Cell>{item.Category}</DataTable.Cell> <DataTable.Cell>{item.Ville}</DataTable.Cell> <DataTable.Cell numeric>{item.Prix}</DataTable.Cell> </DataTable.Row> </DataTable> </View> ); }; render() { const { data, isLoading } = this.state; return ( <FlatList data={data} renderItem={this.renderItem} /> ); } };
almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Su FlatList está recorriendo cada elemento y creando una DataTable. En su lugar, puede envolver los elementos Data.Row dentro de una FlatList.

 <DataTable> <DataTable.Header> <DataTable.Title>Dessert</DataTable.Title> <DataTable.Title numeric>Calories</DataTable.Title> <DataTable.Title numeric>Fat</DataTable.Title> </DataTable.Header> <FlatList data={data} renderItem={_renderItem} /> </DataTable>

Ejemplo de trabajo completo: https://snack.expo.dev/@tnr_c/scrollable-datatable

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error