React-native:如何包装 FlatList 项目 [英] React-native: how to wrap FlatList items

问题描述

我有一个查询返回的术语列表.每一个都是一个词.目前我的 FlatList 将每个单词渲染到同一行的按钮中(horizo​​ntal={true})我希望按钮像普通文本一样环绕.但我绝对不想使用列功能，因为那样看起来不太自然.这对于 FlatList 来说可能是一个糟糕的用例吗?我可以使用其他任何组件吗?

I have a list of Terms that are returned by a query. Each is a single word. Currently my FlatList renders each word into a button on the same row (horizontal={true}) I would like the buttons to wrap like normal text would. But I absolutely do not want to use the column feature, because that would not look as natural. Is this possibly a bad use-case for FlatList? Are there any other components I could use?

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>

    );
  }

我收到的一条错误消息是:

One error message amongst others I've gotten is:

警告:flexWrap:wrap`` 不支持 VirtualizedList 组件.考虑使用 numColumns 和 FlatList> 代替.

Warning: flexWrap:wrap`` is not supported with the VirtualizedList components.Consider using numColumns with FlatList instead.

推荐答案

我如何包装组件如下

flatlist: {
   flexDirection: 'column',
},

并在我的 FlatList 组件中添加了这个道具

and in my FlatList component added this props

numColumns={3}

这篇关于React-native:如何包装 FlatList 项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！