React Native:FlastList中的一个简单DataTable，如何为每个项目获得一个唯一的DataTabl

Question

我获取json数据，我想用数据表来显示它。问题是，我的FlatList组件为每个项目创建了一个新的数据表，但我想要为所有项目创建一个DataTable。

我找不到如何修复它。我在这里共享所有代码。你能帮我吗？谢谢

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}
/>
);
}
};

Answer 1

您的FlatList正在为每个项目循环并创建一个DataTable。您可以将Data.Row元素包装在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>

完整的工作示例：https://snack.expo.dev/@tnr_c/可滚动数据表