我刚刚开始从事 React Native 项目,但我陷入了困境。我需要显示来自 API 的图像列表。 API 只提供我可以使用的图像网址,如下所示:
<Image
style={{width: 50, height: 50}}
source={{uri: 'https://avatars0.githubusercontent.com/u/13102253?s=460&v=4'}}
/>
图像计数是动态的,但我只想每行显示 3 个图像。我怎样才能实现这个目标?
最佳答案
您可以使用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"
}})
关于javascript - 在 React Native 中将 3 个图像排成一行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47637927/