react-native - 多列上的 SectionList 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>
      )}
    />