javascript - 在 React Native 中将 3 个图像排成一行

Question

我刚刚开始从事 React Native 项目，但我陷入了困境。我需要显示来自 API 的图像列表。 API 只提供我可以使用的图像网址，如下所示:

<Image
      style={{width: 50, height: 50}}
      source={{uri: 'https://avatars0.githubusercontent.com/u/13102253?s=460&v=4'}}
/>

图像计数是动态的，但我只想每行显示 3 个图像。我怎样才能实现这个目标？

Answer 1

您可以使用ListView，在其中您可以通过将其包装到行中来设置其样式，如下所示页面大小将负责排列成行

<ListView
   contentContainerStyle={styles.list}
   dataSource={this.props.yourData} //datasource either props/state only
   pageSize={3}
   renderRow={(data, rowID, sectionID) => (
<Image
  style={{width: 50, height: 50}}
  source={{uri: data.path}}/>)} //path here is url that you receive

const styles = StyleSheet.create({
list: {
flexDirection: "row",
flexWrap: "wrap"
}})