reactjs - 动态改变 React Native Flat List 中的列数

Question

我有一个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} />}
      />}

Answer 1

从文档中，看起来你应该做这样的事情

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

Answer 2

我用钥匙做到了

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

Answer 3

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

<FlatList key={changingValue} .. /> 

应该解决它。

Answer 4

在钩子里

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

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

Answer 5

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

为我工作

Answer 6

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