动态插入行和列 - React Native

Question

我希望发生什么

我希望我的应用能够以三行的形式整理Assembly.Load(byte[])张照片。

例如，如果我有九张图片，我希望能够像这样放置它们：

x

现在如果我有12张图片，我希望它们像这样放置：

XXX
XXX
XXX

两张图片：

XXX
XXX
XXX
XXX

依此类推。

我尝试了什么

首先尝试

没有样式，图像弹出如下：

XX

第二次尝试

如果我使用X X X X X ，他们会弹出如下：

{flexDirection: 'row'}

即使他们离开了屏幕。

第三次尝试

我尝试使用for循环遍历每张第三张照片，但它抱怨没有关闭/打开XXXXXXXXXXX ：

View

这种方式也行不通，因为我不知道照片的数量是否是三的倍数，如果不是，我就无法关闭if (x % 3 === 0) { return ( </View> <View style={{flexDirection: 'row'}}> <Image /> ) }else { return ( <Image /> ) }

Answer 1

您应该设置flexDirection: row，然后使用flexWrap as documented here。它会做的就是像第二次尝试一样对待视图，但是当下一个图像没有足够的空间时，它将把它带到下一行。

这将允许您创建响应更快的应用程序，就好像屏幕空间更多或更少（小型手机与大型手机），每行可以或多或少地拥有理想体验。