React-native：如何包裝 FlatList 項目

Question

我有一個查詢返回的術語列表。 每一個都是一個詞。 目前我的 FlatList 將每個單詞渲染到同一行上的一個按鈕中 (horizo​​ntal={true}) 我希望按鈕像普通文本一樣換行。 但我絕對不想使用列功能，因為那樣看起來不太自然。 這對於 FlatList 來說可能是一個糟糕的用例嗎？ 我可以使用其他任何組件嗎？

const styles = StyleSheet.create({
  flatlist: {
    flexWrap: 'wrap'
  },
  content: {
    alignItems: 'flex-start'
  }})

render() {

    return (
      <Content>
        <Header searchBar rounded iosStatusbar="light-content" androidStatusBarColor='#000'>
          <Item>
            <Icon name="ios-search" />
            <Input onChangeText={(text) => this.setState({searchTerm: text})} value={this.state.searchTerm} placeholder="enter word"/>
            <Icon name="ios-people" />

            <Button transparent onPress={this._executeSearch}>
            <Text>Search</Text>
          </Button>
          </Item>
        </Header>

        <FlatList style={styles.flatlist} contentContainerStyle={styles.content}
            horizontal={true} data={this.state.dataSource} renderItem={({item}) =>
                  <Button>
                    <Text>{item.key}</Text>
                  </Button>

              }>
        </FlatList>
      </Content>

    );
  }

我收到的一條錯誤消息是：

警告： flexWrap: wrap`` 不支持VirtualizedList組件。請考慮使用numColumns和FlatList 。

Answer 1

我如何能夠包裝組件如下所示

flatlist: {
   flexDirection: 'column',
},

並在我的 FlatList 組件中添加了這個道具

numColumns={3}

Answer 2

您可以移除水平道具以實現環繞效果

................
..................

<FlatList
    contentContainerStyle={{flexDirection : "row", flexWrap : "wrap"}} 
    data={this.state.dataSource} renderItem={({item}) =>
        <Button>
            <Text>{item.key}</Text>
        </Button>
    }
/>
.................
..............

Answer 3

不幸的是，FlatLists 確實不支持 flexWrap。 我們建議使用 ScrollView 而不是 FlatList 來創建這種效果。 這是問題： https : //github.com/facebook/react-native/issues/13939

Answer 4

解決方案1：

你可以添加numColumns道具

numColumns={3}

像這樣

   <FlatList
      numColumns={3}
      data={data}
      renderItem={({ item }) => 
        <Button>
            <Text>{item.key}</Text>
        </Button>
    }
/>

解決方案2：

您可以刪除水平道具並添加 contentContainerStyle

contentContainerStyle={{flexDirection : "row", flexWrap : "wrap"}}

像這樣

   <FlatList
      contentContainerStyle={{flexDirection : "row", flexWrap : "wrap"}}
      data={data}
      renderItem={({ item }) => 
        <Button>
            <Text>{item.key}</Text>
        </Button>
    }
/>

Answer 5

當我們使用horizontal flatList 時，不能使用flexWrap: wrap VirtualizedList 組件不支持flexWrap: wrap 。 您可以使用numColumns和 FlatList 在平面列表中制作一些列。 然而，

如果您需要堆疊 flatlist 項目，您可以使用

contentContainerStyle={{ justifyContent: 'center', flexDirection: 'row', flexWrap: 'wrap' }}

完整代碼如下

<FlatList
      data={data}
      keyExtractor={(item) => item.type.id}
      contentContainerStyle={{ justifyContent: 'center', flexDirection: 'row', flexWrap: 'wrap' }}
      renderItem={({ item }) => 
        <Button>
            <Text>{item.key}</Text>
        </Button>
    }
/>