React native React native：如何包装平面列表项

我有一个查询返回的术语列表。每一个都是一个单词。当前，我的平面列表将每个单词呈现到同一行的一个按钮中（水平={true}） 我希望按钮像普通文本一样换行。但我绝对不想使用column功能，因为这看起来不太自然。 对于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>

    );
  }

const styles=StyleSheet.create({
平面列表：{
flexWrap:“wrap”
},
内容：{
alignItems:“灵活启动”
}})
render（）{
返回(
this.setState（{searchTerm:text}）value={this.state.searchTerm}占位符=“输入单词”/>
搜寻
{item.key}
}>
);
}

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

<>警告：<代码> FraceLabe: <代码>包装''不支持<代码>虚拟化列表组件.请考虑使用<代码> NoMuths<代码> > <代码>表> <代码> >

---

我是如何包装组件的，如下所示

flatlist: {
   flexDirection: 'column',
},

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

在我的平面列表组件中添加了这个道具

numColumns={3}

---

不幸的是，flexWrap在FlatLists中确实不受支持。我们建议使用滚动视图而不是平面列表来创建此效果。这就是问题所在：

您可以移除水平支柱以实现包裹效果

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

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

。。。。。。。。。。。。。。。。
..................
{item.key}
}
/>
.................
..............

当我们使用

水平

flatList时，无法使用

flexWrap:wrap

不受VirtualizedList组件的支持。您可以将

numColumns

与平面列表一起使用，在平面列表中创建一些列。但是,

如果需要堆叠扁平列表项，可以使用

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

完整代码如下所示

flatlist: {
   flexDirection: 'column',
},

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

item.type.id}
contentContainerStyle={{justifyContent:'center'，flexDirection:'row'，flexWrap:'wrap'}}
renderItem={（{item}）=>
{item.key}
}
/>

解决方案1： 你可以添加道具

像这样

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

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

像这样

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

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

{item.key}
}
/>

有关将numColumns与

SectionLlist一起使用，请参阅此解决方案仅在不需要动态计算numColumns时有效，因为渲染后无法更改numColumns。接受的答案需要numColumns，此答案更好。尽管结果在Android上看起来令人满意，但这会产生警告，
“virtualist”组件不支持“flexWrap:”wrap“。考虑使用NUBSULD与“扁平表”而不是。