反应本机FlatList警告

Question

我试图用动态项目大小实现FlatList，更具体地说，我的项目有时会占据整个屏幕宽度，有时只有一半，因此设置numColumns = {2}无法正常工作，我的解决方法如下这个：

div.player-bar

一切正常，通过item.width应用项目的宽度。但是问题在于，每次渲染列表时，我都会收到以下日志警告：

var target = document.getElementsByClassName('player-bar')[0];
var config = { attributes: true, childList: true, subtree: true };

const observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    mutation.forEach(function(addedNode) {
      var e = addedNode.document.getElementsByClassName('el-badge__content')[0];
      if (e) {
        console.log("Element appearance/changed")
      };
    });
  });
});

observer.observe(target, config);

有人知道这如何影响列表的性能吗？如果有影响，我如何改善代码？

这就是我想要的样子：

Answer 1

要修复numColumns = {2}，您必须将其设置为horizo​​ntal = {false} 变成了

      <FlatList
        ListHeaderComponent={this.header}
        keyExtractor={item => item.id.toString()}
        data={data}
        horizontal={false}
        numColumns={2} 
        contentContainerStyle={{ flexDirection: 'row' }}
        renderItem={({ item }) => <Item item={item} />}
       />