不变违规：不支持动态更改 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