Question

这是一个令人头疼的问题。

为了在SectionList的部分中呈现多个列，我理解必须在每个部分中呈现FlatLists。这是因为只有FlatList支持numColumns prop。

出于某种原因，下面的代码似乎呈现给定部分中每个项目的所有项目的FlatList。

代码：

export default class LetterList extends React.Component {
  render() {
    let lists = [
        {
          key: "One",
          data: [{letter: 'a'}, {letter: 'b'}]
        },
        {
          key: "Two",
          data: [{letter: 'c'}, {letter: 'd'}, {letter:'e'}]
        }
        {
          key: "Three",
          data: [{letter: 'f'}]
        }
      ]

    return (
      <View key="letterList" >
        <SectionList
          renderItem={({section}) =>
            (
              <FlatList
                data={section.data}
                renderItem={({item}) => <Text>{item.letter}</Text>}
              />
            )
          }
          renderSectionHeader={({section}) => <Text>{section.key}</Text>}
          sections={lists}
        />
      </View>
    );
  }
}

看起来像：

One
ab
ab
Two
cd
e
cd
e
cd
e
Three
f

导致这种情况的原因是什么？

感谢您的帮助。

Answer 1

为了在SectionList的各部分中呈现多个列，据我所知，必须在每个部分内呈现FlatList。这是因为只有FlatList支持numColumns属性。

这个假设是错误的...节列表已经“创建”了所需的列表，您不应该为每个部分创建FlatList，而只能按照SectionList需要的方式对齐数据

请查看官方文档提供的以下示例： https://facebook.github.io/react-native/docs/sectionlist

示例1，摘自链接：

// Example 1 (Homogeneous Rendering)
<SectionList
  renderItem={({item, index, section}) => <Text key={index}>{item}</Text>}
  renderSectionHeader={({section: {title}}) => (
    <Text style={{fontWeight: 'bold'}}>{title}</Text>
  )}
  sections={[
    {title: 'Title1', data: ['item1', 'item2']},
    {title: 'Title2', data: ['item3', 'item4']},
    {title: 'Title3', data: ['item5', 'item6']},
  ]}
  keyExtractor={(item, index) => item + index}
/>

Answer 2

这似乎有助于达到目的。

  render() {
    let lists = [
        {
          key: "One",
          data: [{letter: 'a'}, {letter: 'b'}]
        },
        {
          key: "Two",
          data: [{letter: 'c'}, {letter: 'd'}, {letter:'e'}]
        },
        {
          key: "Three",
          data: [{letter: 'f'}]
        }
      ]
    console.log("Rendering");
//  console.log(this.props.data);
    listsComponents = [];

    for (var i = 0; i < lists.length; i++) {
      listsComponents[i] = (
        <View>
          <Text>{lists[i].key}</Text>
          <FlatList
            key={lists[i].key}
            data={lists[i].data}
            numColumns={2}
            renderItem={({item}) => <Text>{item.letter}</Text>}
          />
        </View>
      )
    }

    return (
      <View>
        {listsComponents}
      </View>
    )
  }
}

React Native - 嵌套FlatLists呈现指数

2 个答案: