解决方案 1：

Question

我有一个查询返回的条款列表。每个都是一个单词。目前我的FlatList将每个单词呈现为同一行上的一个按钮（horizontal = {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:组件不支持VirtualizedList wrap``。请使用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

当我们使用 horizontal flatList 时，不可能使用 flexWrap: wrap，VirtualizedList 组件不支持它。您可以使用 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>
    }
/>

Answer 5

解决方案 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>
    }
/>

React-native：如何包装FlatList项

5 个答案:

解决方案 1：

解决方案 2：