[英]React Native - Fitting elements precisely
誰能向我解釋這個布局難題/請提出更好的方法:
我有一個動態的圖像數組和一個“添加照片”按鈕,它們以相等的寬度排列成行 - 我希望縮略圖/按鈕的寬度/高度完全相同,並在整個塊中顯示為 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>
這里是相關的 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,
},
imgThumbnailBtn:{
width:25,
height:25,
}, 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',
},
如您所見,圖像容器 (imgThumbnailBlock:) 並添加更多按鈕容器 imgThumbAddMore 具有由 itemwidth 計算提供的應用寬度/高度。 const itemWidth = (Dimensions.get('window').width / 3) -30;
我的 iphone 的可用寬度為 375 - 如果我將每個項目除以 3 - 從每個項目中取出邊距(我想要 10 個邊距)並減去每個項目的 30 除以 3 的容器填充 - 剩下如上所述從每個寬度中減去 30。 這提供了每個塊的寬度為 95,應用了 10 邊距和容器填充,這加起來為 375 - 所以一切都應該完全適合。
但是當我應用這個時,第三項落在第二行。 我需要將保證金值降低到晚上 8 點,以讓一切都適合 - 這對我來說是零意義 - 可以提出建議/解釋嗎?
實際上它應該是這樣工作的,我為你設置了一個 Expo Snack:
https://snack.expo.io/@moritzw1/image-grid-fitting
所以我猜你的頂級水平之外還有一些東西
<View style={PhotoStyles.imgThumbnailWrap}>
這會導致視圖縮小(如邊框、填充或邊距)。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.