不变违规：不支持动态更改 numColumns。虽然我没有改变

Question

{
   selected.length == 2 
   ?
   <FlatList
   keyExtractor={item => "_" + item.id}
   renderItem={this.renderLastItem}
   data={subGroups}
   numColumns={1} /> 
   :
   <FlatList
   keyExtractor={item => "#" + item.id}
   renderItem={this.renderItem}
   data={subGroups}
   numColumns={2} />
}

在上面的代码行中，当 selected.length 等于 2 时，出现以下错误：

Invariant Violation: Changing numColumns on the fly is not supported.

这是两个不同的列表，我不会更改 numColumns。在我看来，react native 试图在所有条件下使用相同的 FlatList 对象。我该如何解决这个问题？

Answer 1

此问题已被提出并得到回答。我不确定为什么会抛出此错误。但是，由于在 FlatList 上实施了所有围绕渲染的优化，可能是 RN 团队决定抛出此错误。

如链接问题的答案中所述，您需要向 FlatList 添加键，以帮助 React-Native 在 selected 值更改时刷新组件。

您可以通过

修复它

{selected.length == 2 ?
<FlatList
   key={'_'}
   keyExtractor={item => "_" + item.id}
   renderItem={this.renderLastItem}
   data={subGroups}
   numColumns={1} /> 
   :
<FlatList
   key={'#'}
   keyExtractor={item => "#" + item.id}
   renderItem={this.renderItem}
   data={subGroups}
   numColumns={2} />
}

Github 提出的问题类似于 https://github.com/facebook/react-native/issues/15944

不变违规：不支持动态更改 numColumns。虽然我没有改变

Invariant Violation: Changing numColumns on the fly is not supported. I do not change though

react-native

react-native-flatlist