多列上的 SectionList React Native答案

【问题标题】：SectionList on multiple columns React Native多列上的 SectionList React Native
【发布时间】：2020-06-11 15:14:33
【问题描述】：

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

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

on same column photo

【问题讨论】：

标签： react-native react-native-sectionlist

【解决方案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>
      )}
    />

【讨论】：