动态更改 React Native Flat List 中的列数

Question

我有一个 FlatList，我想根据方向更改列数。但是，执行此操作时出现红屏。根据红屏错误消息，我不太确定应该如何更改 key 道具。感谢任何帮助。

      // 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

我觉得这个消息很明确。如果要更改列数以强制重新呈现，则需要为 portrait/landscape 定义不同的键。尝试将 numCols 值连接到 keyExtractor.

中的索引

Answer 2

来自 documentation，看来你应该这样做

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

Answer 3

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

<FlatList key={changingValue} .. />

应该可以解决。

Answer 4

我用 key

做到了

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

Answer 5

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

适合我

Answer 6

挂钩

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

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

Answer 7

如果您需要让您的应用在横屏模式下响应，试试这个：

     const {height, width} = useWindowDimensions();
     const isLandscape = width > height;

     <FlatList
     numColumns={Number(isLandscape) + 1}
     keyExtractor={item => item.id}
     key={Number(isLandscape)}
     ...

这会将布尔值转换为数字。注意 useWindowDimensions 是从 react-native.

导入的

动态更改 React Native Flat List 中的列数

Dynamically changing number of columns in React Native Flat List

reactjs

react-native

react-native-flatlist

挂钩