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