【问题标题】：Dynamically changing number of columns in React Native Flat List动态改变 React Native Flat List 中的列数
【发布时间】：2017-11-01 16:08:11
【问题描述】：

我有一个FlatList，我想根据方向更改列数。但是，当我这样做时，我得到了红屏。根据红屏错误消息，我不太确定应该如何更改密钥道具。任何帮助表示赞赏。

      // dynamically changing number of columns
      const numCols = orientation === constants.PORTRAIT ? 3 : 8

      <FlatList
        keyExtractor={(_, i) => i}
        numColumns={numCols} // assigning the number of columns
        horizontal={false}
        renderItem={({ item }) => <ListItem imageUrl={item.url} />}
      />}

【问题讨论】：

标签： reactjs react-native react-native-flatlist

【解决方案1】：

来自documentation，看起来你应该做这样的事情

key={(this.state.horizontal ? 'h' : 'v')}

【讨论】：

关键属性对我有用，但是在重新渲染标题时闪烁，因为它是静态的并且对于列表的两个实例都是相同的
这有点用..但是列表将被重新渲染，滚动位置将从头开始
为什么不直接使用 numColumns 作为键？

【解决方案2】：

我使用 key

    numColumns = {this.state.columnCount}
    key={this.state.columnCount}

【讨论】：

来到这里是为了在答案中添加类似的内容，看起来您已经完成了；)

【解决方案3】：

将变化的值传递给 FlatList 本身。它与 renderItem 方法中的 keyExtractor 或 key 属性无关：

<FlatList key={changingValue} .. />

应该解决它。

【讨论】：

【解决方案4】：

挂钩

const [numCols, setColumnNo] = useState(0);

<FlatList
key={numCols}
numColumns={numCols}
...
/>

【讨论】：

【解决方案5】：

<FlatList
         data={props.localFolders}
         style={{ width: "100%" }}
         numColumns={4}
         key={4}
         renderItem={({ item }) => <LocalFolder {...item} />}
         keyExtractor={(item) => item.id.toString()}
/>

为我工作

【讨论】：

【解决方案6】：

我认为信息非常明确。如果要更改列数以强制重新渲染，则需要为纵向/横向定义不同的键。尝试将numCols 值连接到keyExtractor 中的索引。

【讨论】：

@scooper，感谢您的回复。我完全按照您所说的做了，但仍然出现错误。 gist.github.com/foobar8675/… 。我上传了一个要点，很困惑。（最初我做了与您的建议非常相似的事情，但没有奏效，这就是为什么我认为我不理解错误消息。
就像发布的解决方案一样，可能需要指定平面列表本身的键才能触发列表上的全新重新渲染，而不仅仅是单元格
不，这是错误的，您应该重新渲染平面列表而不是平面列表中的项目