多列 React Native 上的部分列表

Question

我有这个数据，我想在多列上呈现，而不是在另一列之上

const DATA = [
{
squadra: ["Atalanta - Sassuolo"],
data: [{ id: 1, quota: '1.33'},{id:'X', quota:'5.12'},{id:2, quota: '8.25'}],
},
];

我希望 ID 保持在顶部，"配额"保持在相应的 ID 下方

部分列表代码如下：

<SectionList
sections={DATA}
keyExtractor={(item, index) => item + index}
renderItem={({item}) => (
<TouchableOpacity
onPress={() => {
console.log(item.id)
}}
>

<Text>{item.quota}</Text>

</TouchableOpacity>
)}
renderSectionHeader={({section: {squadra}}) => (
<Text style={styles.header}>{squadra}</Text>
)}
/>

在同一列照片上

Answer 1

只需在显示每个项目的配额之前添加<Text>{item.id}</Text>，如下所示。

<SectionList
sections={DATA}
style={styles.container}
keyExtractor={(item, index) => item + index}
renderItem={({ item }) => (
<TouchableOpacity
onPress={() => {
console.log(item.id);
}}>
<Text>{item.id}</Text>
<Text>{item.quota}</Text>
</TouchableOpacity>
)}
renderSectionHeader={({ section: { squadra } }) => (
<Text style={styles.header}>{squadra}</Text>
)}
/>