ScrollView内部图像的网格视图 - React Native

Question

所以本周我开始了我的第一个宠物项目，以获得RN的学习经验。到目前为止，我认为这么好。但是现在我遇到了一些障碍，所以我希望有人会帮助我。所以我有一个图像视图（来自api）。我可以将图像放在网格视图中，如下所示：

但是一旦我将这个视图放在一个Flatlist中，整个布局就搞砸了。看起来像这样：

我试过玩flex而无济于事。任何帮助将不胜感激

代码可以在这里找到： 更新： https://gist.github.com/anonymous/c565d8f9d7dfa65646b7a3a81bf6330f

Answer 1

你必须使用contentContainerStyle而不仅仅是style并设置一些灵活道具才能使用它。例如：

justifyContent: 'flex-start'

flexDirection: 'column'

Answer 2

FlatList具有numColumns属性。 试试：

<FlatList style={styles.FlatlistStyles} data={this.state.moviesTrending}
  numColumns={4}
  renderItem={({item}) => this.renderMoviesTrending(item)}
  keyExtractor={this._keyExtractor}
 />

，然后向子元素添加宽度style={{ width: 200 }}或任何适当的宽度（由renderMoviesTrending函数渲染）。