反應原生 Flatlist 網格和項目標題

Question

我想自定義一個相同的屏幕：

所以我使用 Flastlist 並檢查項目是否是標題我將設置為 item = window.with 如果不是 width item = window.width/3。 但它的錯誤。 這是我的代碼：

 const { width, height } = Dimensions.get("window") class App extends React.Component { constructor() { super() this.state = { data: [ { name: "Movies", header: true }, { name: "Interstellar", header: false }, { name: "Dark Knight", header: false }, { name: "Pop", header: false }, { name: "Music", header: true }, { name: "Adams", header: false }, { name: "Nirvana", header: false }, { name: "Amrit Maan", header: false }, { name: "Oye Hoye", header: false }, { name: "Eminem", header: false }, { name: "Places", header: true }, { name: "Jordan", header: false }, { name: "Punjab", header: false }, { name: "Ludhiana", header: false }, { name: "Jamshedpur", header: false }, { name: "India", header: false }, { name: "People", header: true }, { name: "Jazzy", header: false }, { name: "Appie", header: false }, { name: "Baby", header: false }, { name: "Sunil", header: false }, { name: "Arrow", header: false }, { name: "Things", header: true }, { name: "table", header: false }, { name: "chair", header: false }, { name: "fan", header: false }, { name: "cup", header: false }, { name: "cube", header: false } ], stickyHeaderIndices: [] }; } renderItem(item) { if (item.header) { return ( <View style={{ width: width, height: 40, backgroundColor: 'green' }}> <Text>{item.name}</Text> </View> ) } else { return ( <View style={{ width: width / 3, height: width / 3, backgroundColor: 'white', borderWidth: 1, borderColor: 'gray' }}> <Text>{item.name}</Text> </View> ) } } render() { return ( <View style={{ flex: 1, backgroundColor: 'red' }}> <FlatList data={this.state.data} renderItem={({ item }) => ( this.renderItem(item) )} keyExtractor={item => item.name} /> </View> ); } } export default App;

和我的結果 我有錯誤：一個項目不是標題是一行，但我想連續顯示 3 個項目。

當使用代碼在 flastlist 中添加數字列 = 3 時：

 <FlatList numColumns={3} data={this.state.data} renderItem={({ item }) => (this.renderItem(item))} keyExtractor={item => item.name} />

我有結果

如何修復連續顯示 3 個項目？ 非常感謝。

Answer 1

我想你忘了在 Flatlist 道具中添加numColumns = { 3 } 。 在這里，您可以獲得問題的詳細解決方案。

Answer 2

在主container使用flexWrap: 'wrap'和flexDirection: 'row'應該可以解決您的問題。

<View style={{ flex: 1, backgroundColor: 'red', flexWrap: 'wrap', flexDirection: 'row' }}>
  <FlatList
    data={this.state.data}
    renderItem={({ item }) => (
      this.renderItem(item)
    )}
    keyExtractor={item => item.name}
  />
</View>

Answer 3

我使用嵌套的 FlatList來解決這個問題：

const renderCategory = category => (
    <View>
      <Text>{category}</Text>
      <FlatList
        data={itemsByCategory[category]}
        renderItem={({item, index}) => renderItem(item)}
        keyExtractor={(item, index) => index.toString()}
        numColumns={3}
      />
    </View>
  );

return (
    <FlatList
      data={Object.keys(itemsByCategory)}
      renderItem={({item, index}) => renderCategory(item)}
      keyExtractor={(item, index) => index.toString()}
    />
  );