React-native：如何包装FlatList项目

问题描述：

我有一个查询返回的术语列表。每个是一个单词。目前我的FlatList将每个单词渲染到同一行上的一个按钮（horizontal = {true}）我希望按照正常文本的方式来包装按钮。但我绝对不想使用列功能，因为这看起来不太自然。 FlatList可能是一个糟糕的用例吗？有没有其他的组件可以使用？除其他我已经得到React-native：如何包装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 components.Consider使用numColumns与FlatList，而不是支持。

答

我怎么能包住组件就像下面

flatlist: { 
    flexDirection: 'column', 
},

，并加入我的FlatList组件此道具

numColumns={3}

答

不幸flexWrap是FlatLists确实不支持。我们建议使用ScrollView而不是FlatList来创建这种效果。这是问题：https://github.com/facebook/react-native/issues/13939

React-native：如何包装FlatList项目

相关推荐