Динамическое изменение количества столбцов в React Native Flat List

У меня есть 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} />}
      />}

красный экран смерти


react-native reactjs react-native-flatlist
person Matthew Chung    schedule 31.05.2017    source источник

Ответы (5)


arrow_upward
48
arrow_downward

Судя по документации, вы должны сделать что-то вроде этого

key={(this.state.horizontal ? 'h' : 'v')}
person Greg Billetdeaux    schedule 01.06.2017
comment
ключевой атрибут сработал для меня, но при повторном рендеринге заголовок мерцает, поскольку он статичен и одинаков для обоих экземпляров списка - person Pavan; 12.02.2018
comment
это вроде работает.. однако список будет перерисован, и позиция прокрутки будет инициирована с самого начала - person Sjonchhe; 27.07.2021

arrow_upward
25
arrow_downward

Я сделал это с помощью key

    numColumns = {this.state.columnCount}
    key={this.state.columnCount}
person krish    schedule 17.01.2019

arrow_upward
4
arrow_downward

Передайте изменяющееся значение самому FlatList. Это не имеет ничего общего с keyExtractor или ключевым атрибутом в методах renderItem:

<FlatList key={changingValue} .. />

должен решить это.

person SupaMario    schedule 25.04.2018

arrow_upward
1
arrow_downward

Я думаю, что сообщение очень ясно. Вам нужно определить разные ключи для портретной/пейзажной ориентации, если вы хотите изменить количество столбцов, чтобы вызвать новый повторный рендеринг. Попробуйте объединить значение numCols с индексом в файле keyExtractor.

person sooper    schedule 31.05.2017
comment
@scooper, спасибо за ответ. Я сделал именно то, что вы упомянули, но все равно получаю ошибку. gist.github.com/foobar8675/ . Я загрузил суть и довольно запутался. (сначала я сделал что-то очень похожее на ваше предложение, но оно не сработало, поэтому я подумал, что не понял сообщение об ошибке. - person Matthew Chung; 01.06.2017
comment
Как и в опубликованном решении, это может быть ключ самого плоского списка, который необходимо указать для запуска нового повторного рендеринга в списке, а не только в ячейках. - person sooper; 01.06.2017

arrow_upward
1
arrow_downward 

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

работает на меня

person Nathaniel    schedule 18.02.2021