如何在水平平面列表中垂直包装内容？

【问题标题】：How do I wrap content vertically in a Horizontal FlatList?如何在水平平面列表中垂直包装内容？
【发布时间】：2020-12-26 16:26:22
【问题描述】：

使用 React Native 和 Expo：我有一个水平的 FlatList，其中包含许多简单的 Text 项目。列表下方是我要填充剩余空间的视图。但是，列表垂直扩展而不是收缩以包裹内容。如何让它垂直收缩以适应内容？

在此小吃中展示：https://snack.expo.io/@wex/horizontal-flatlist-shrink-height

【问题讨论】：

标签： react-native flexbox expo

【解决方案1】：

你不应该使用 {flex : 1}。以 FlatList 样式设置 {flexGrow : 0}

<View style={{flex:1}}>
        <FlatList
          data={[{ key: 1345654323 }, { key: 2324565422 }, { key: 334837548 }, { key: 34432 }, { key: 3000223 }, { key: 3333 }]}
          renderItem={this._renderItem}
          horizontal={true}
          style={{backgroundColor:'orange',flexGrow:0}}
        />
        <View style={{backgroundColor:'blue',flexGrow:1}}></View>
      </View>

【讨论】：