[英]React Native - Fitting elements precisely
Can anyone please explain this layout cunundrum to me / suggest a better approach please:谁能向我解释这个布局难题/请提出更好的方法:
I have a dynamic array of images and a 'add photo' button which are layed out in equal widths in rows - i want the thumbnails / button to be eactly the same width / height and show in 3's across the block.我有一个动态的图像数组和一个“添加照片”按钮,它们以相等的宽度排列成行 - 我希望缩略图/按钮的宽度/高度完全相同,并在整个块中显示为 3。 heres a pic -这是一张照片-
heres the layout code:继承人的布局代码:
<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>
heres the relevant styles: const itemWidth = (Dimensions.get('window').width / 3) -30;这里是相关的 styles: const itemWidth = (Dimensions.get('window').width / 3) -30;
imgThumbnailBlock: { margin:8, width:itemWidth, height:itemWidth, position:'relative', }, imgThumbnail: { backgroundColor:'#f79431', width:itemWidth, height:itemWidth, imgThumbnailBlock: { margin:8, width:itemWidth, height:itemWidth, position:'relative', }, imgThumbnail: { backgroundColor:'#f79431', width:itemWidth, height:itemWidth,
},
imgThumbnailBtn: { imgThumbnailBtn:{
width:25,
height:25,
}, imgThumbnailWrap: { flex:1, flexDirection: 'row', justifyContent: 'flex-start', flexWrap:'wrap', marginTop:15, marginBottom:15, marginLeft:15, marginRight:15, }, imgThumbnailWrap: { flex:1, flexDirection: 'row', justifyContent: 'flex-start', flexWrap:'wrap', marginTop:15, marginBottom:15, marginLeft:15, marginRight:15,
}, imgThumbAddMore: { width:itemWidth, height:itemWidth, margin:8, backgroundColor: '#e9e9e9', alignItems:'center', justifyContent: 'center', }, imgThumbAddMore: { width:itemWidth, height:itemWidth, margin:8, backgroundColor: '#e9e9e9', alignItems:'center', justifyContent: 'center',
}, },
as you can see the images container (imgThumbnailBlock:)and add more button container imgThumbAddMore have an applied width /height provided by the itemwidth calculation.如您所见,图像容器 (imgThumbnailBlock:) 并添加更多按钮容器 imgThumbAddMore 具有由 itemwidth 计算提供的应用宽度/高度。 const itemWidth = (Dimensions.get('window').width / 3) -30; const itemWidth = (Dimensions.get('window').width / 3) -30;
My iphone has an available width of 375 - if i divide that by 3 for each item - take away the margin from each (I'd like a 10 margin) and minus the container padding of 30 divided by 3 for each item - that leaves the subtracted 30 from each width as above.我的 iphone 的可用宽度为 375 - 如果我将每个项目除以 3 - 从每个项目中取出边距(我想要 10 个边距)并减去每个项目的 30 除以 3 的容器填充 - 剩下如上所述从每个宽度中减去 30。 this provides a width of each block as 95 with the applied 10 margin and container padding this adds up to 375 - so everything should fit exactly.这提供了每个块的宽度为 95,应用了 10 边距和容器填充,这加起来为 375 - 所以一切都应该完全适合。
But when i apply this the third item falls onto the second line.但是当我应用这个时,第三项落在第二行。 I need to reduce the margin value to 8pm to allow everything to fit - this makes zero sense to me - can off a suggestion / explanation please?我需要将保证金值降低到晚上 8 点,以让一切都适合 - 这对我来说是零意义 - 可以提出建议/解释吗?
Actually it should work like this, I setup an Expo Snack for you:实际上它应该是这样工作的,我为你设置了一个 Expo Snack:
https://snack.expo.io/@moritzw1/image-grid-fitting https://snack.expo.io/@moritzw1/image-grid-fitting
So I'm guessing there is something outside of your top level所以我猜你的顶级水平之外还有一些东西
<View style={PhotoStyles.imgThumbnailWrap}>
that causes the view to shrink (like borders, padding or margin).这会导致视图缩小(如边框、填充或边距)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.