web-dev-qa-db-ja.com

Reactネイティブフラットリストの列数を動的に変更する

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

red screen of death

reactjsreact-nativereact-native-flatlist
11
Matthew Chung

documentation から、次のようにする必要があるようです

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

私はkeyを使用してそれを行いました

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

変化する値をFlatList自体に渡します。 renderItemメソッドのkeyExtractorまたはキーattrbibuteとは関係ありません。

<FlatList key={changingValue} .. />

それを解決する必要があります。

2
SupaMario

メッセージは非常に明確だと思います。列の数を変更して新しい再レンダリングを強制する場合は、縦向き/横向きに異なるキーを定義する必要があります。 numCols値をkeyExtractorのインデックスに連結してみてください。

1
sooper
horizontal={false}
numColumns={2}

これを試して

0
M.Kalidass