React Native - Адаптивная ширина изображения (в процентах?)

Question

У меня есть отзывчивая сетка фотографий, встроенная в приложение RN -

Мне бы хотелось, чтобы 3 изображения помещались на экране с соответствующимижелоба.Все изображения являются квадратами.

Я приведу несколько советов о том, как лучше всего добиться этого - я бы использовал проценты в веб-билде для каждого квадрата изображения, но понимаю, что в RN это невозможно.

ЭтоЭто то, что у меня так далеко: код в основном извлекает изображения из массива с помощью функции карты и добавляет серую кнопку загрузки изображений того же размера после них, как показано ниже:

     <View style={PhotoStyles.imgThumbnailWrap}>
            {this.state.ADImageArray.map((prop, key) => {

               return (
                  <Image
                    source={{uri: prop, isStatic: true}}
                    style={PhotoStyles.imgThumbnail}
                    />
               );
            })}
            <TouchableOpacity onPress={this.photoAdditional} >
            <View style={PhotoStyles.imgThumbAddMore}>
              <Image source={require('../images/icons/ico-upload- 
               photo.png')} style={PhotoStyles.imgThumbnailBtn} />
            </View>
      </View>

Вот стили:

imgThumbnailWrap: {
  flex:1,
  flexDirection: 'row',
  justifyContent: 'flex-start',
  flexWrap:'wrap',
},
imgThumbnail: {
  backgroundColor:'#f79431',
  width:100,
  height:100,
  margin:8,
},
imgThumbAddMore: {
  width:100,
  height:100,
  margin:8,
  backgroundColor: '#e9e9e9',
  alignItems:'center',
  justifyContent: 'center',

},

Как вы можете видеть, два класса изображений (imgThumbnail и imgThumbAddMore) имеют фиксированную ширину в приведенном выше примере - я бы хотел, чтобы они помещались в ряд из 3ширина в процентах ширина и высота в зависимости от ширины родительского контейнера (imgThumbnailWrap).Любой совет?

Answer 1

Вы можете разделить ширину устройства и вычесть поле снаружи

import { Dimensions } from "react-native";

const padding = 10
const itemWidth = (Dimensions.get('window').width / 3) - (padding * 4)

Используйте itemWidth с шириной и высотой, чтобы получить идеальные квадраты.

Answer 2

Эту проблему легко решить, используя paddingTop, width и position.Просто попробуйте следующий код.

<View style={{width:'100%',paddingTop:'100%'}}>
  <Image source={{uri:url}} style={{position:'absolute',left:0,bottom:0,right:0,top:0,resizeMode:'contain'}} />
 </View>