【发布时间】：2020-01-26 03:41:17
【问题描述】：
任何人都可以向我解释这个布局难题/请提出更好的方法：
我有一个动态图像数组和一个“添加照片”按钮，它们以相等的宽度排列成行 - 我希望缩略图/按钮的宽度/高度完全相同，并在整个块中显示为 3。这是一张照片 -
这里是布局代码：
<View style={PhotoStyles.imgThumbnailWrap}>
{this.state.ADImageArray.map((prop, key) => {
return (
<View style={PhotoStyles.imgThumbnailBlock}>
<Image
source={{uri: prop, isStatic: true}}
style={PhotoStyles.imgThumbnail}
/>
<TouchableOpacity onPress={this.removephoto} style={PhotoStyles.removePhotoLnk}>
<Image
source={require('../images/icons/ico-removeImg.png')}
style={PhotoStyles.removePhotoImg}
/>
</TouchableOpacity>
</View>
);
})}
<TouchableOpacity onPress={this.photoAdditional} >
<View style={PhotoStyles.imgThumbAddMore}>
<Image source={require('../images/icons/ico-upload-photo.png')} style={PhotoStyles.imgThumbnailBtn} />
</View>
</TouchableOpacity>
</View>
以下是相关样式： const itemWidth = (Dimensions.get('window').width / 3) -30;
imgThumbnailBlock: { 边距：8， 宽度：项目宽度， 高度：项目宽度， 位置：'相对'， }, img缩略图：{ 背景颜色：'#f79431', 宽度：项目宽度， 高度：项目宽度，
},
imgThumbnailBtn: {
width:25,
height:25,
}, imgThumbnailWrap：{ 弹性：1， flexDirection: '行', justifyContent: 'flex-start', flexWrap:'换行', 边距顶部：15， marginBottom:15, 边距左：15， marginRight:15,
}, imgThumbAddMore: { 宽度：项目宽度， 高度：项目宽度， 边距：8， 背景颜色：'#e9e9e9', alignItems：'中心'， justifyContent: '中心',
},
您可以看到图像容器 (imgThumbnailBlock:) 并添加更多按钮容器 imgThumbAddMore 具有由 itemwidth 计算提供的应用宽度/高度。 const itemWidth = (Dimensions.get('window').width / 3) -30;
我的 iphone 的可用宽度为 375 - 如果我将每个项目除以 3 - 将每个项目的边距（我想要 10 个边距）减去每个项目的 30 除以 3 的容器填充- 从上面的每个宽度中减去 30。这提供了每个块的宽度为 95，应用了 10 个边距和容器填充，这加起来为 375 - 所以一切都应该完全适合。
但是当我应用这个时，第三项落在第二行。我需要将边距值降低到晚上 8 点，以让一切都适合 - 这对我来说是零意义 - 可以提出建议/解释吗？
【问题讨论】：
标签： ios react-native flexbox