小编mrm*_*goo的帖子

React-native:如何包装FlatList项

我有一个查询返回的条款列表.每个都是一个单词.目前我的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>

    );
  }
Run Code Online (Sandbox Code Playgroud)

我得到的其中一条错误信息是:

警告:flexWrap:components``不支持wrap`` ,而是VirtualizedList使用numColumnswith FlatList.

react-native react-native-flexbox react-native-flatlist

16
推荐指数
2
解决办法
1万
查看次数