Может кто-нибудь, пожалуйста, объясните мне эту хитрость макета / предложите лучший подход, пожалуйста:
У меня есть динамический массив изображений и кнопка «Добавить фото», которые расположены одинаковой ширины в строках - яхотите, чтобы миниатюры / кнопки были одинаковой ширины / высоты и отображались в 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: {margin: 8, width: itemWidth, height: itemWidth, position:'lative ',}, imgThumbnail: {backgroundColor:' # #f79431 ', ширина: itemWidth, высота: itemWidth,
},
imgThumbnailBtn: {
width:25,
height:25,
}, imgThumbnailWrap: {flex: 1, flexDirection:' row ', justifyContent:'flex-start ', flexWrap:' wrap ', marginTop: 15, marginBeft: 15, marginLeft: 15, marginRight: 15,
}, imgThumbAddMore: {width: itemWidth, высота: itemWidth, margin: 8,backgroundColor: '# e9e9e9', alignItems: 'center', justifyContent: 'center',
},
, так как вы можете видеть контейнер изображений (imgThumbnailBlock:) и добавить контейнер дополнительных кнопок imgThumbAddMoreиметь примененную ширину / высоту, обеспечиваемую расчетом ширины элемента. const itemWidth = (Dimensions.get ('window'). Width / 3) -30;
Мой iphone имеет доступную ширину 375 - если я разделю это на 3 для каждого элемента- уберите поля из каждого (я хотел бы 10 полей) и минус отступ контейнера 30, деленный на 3 для каждого элемента - что оставляет вычтенные 30 из каждой ширины, как указано выше.это обеспечивает ширину каждого блока как 95 с примененным 10 полем и заполнением контейнера, это добавляет до 375. Таким образом, все должно точно соответствовать.
Но когда я применяю это, третий элемент попадает на вторую строку.Мне нужно уменьшить значение поля до 8 вечера, чтобы все уместилось - для меня это ноль смысла - можете ли вы исключить предложение / объяснение, пожалуйста?