Я хочу, чтобы React Native Image имел ширину 50% от доступной ширины экрана, без изменения отношения ширины к высоте изображения.

Любые подсказки, как это решить?

11
manpenaloza 4 Сен 2016 в 00:44

4 ответа

Лучший ответ

Используйте режим изменения размера cover и установите ширину на ScreenWidth / 2, вы можете получить ширину экрана, используя Компонент" Размеры "

//Get screen width using Dimensions component 
var {width} = Dimensions.get('window');
//....
//In image style 
image:{
   width: width * 0.5
}
//In render function
<Image resizeMode = 'cover' style = {styles.image}/>

Изменить добавление переполнения

//add overflow : visible 
<Image resizeMode = 'cover' style = {[styles.image,{overflow: 'visible'}]}/>
21
LHIOUI 4 Сен 2016 в 22:35

Локальные изображения могут быть визуализированы без указания фиксированной ширины и высоты, но для удаленных изображений вы должны указать размеры, поскольку react-native не может вычислить их во время выполнения. Итак, для меня работает следующее

<View style={styles.thumbContainer}>
      <Image source={{uri: "REMOTE_IMAGE_URI}} style={styles.thumbnail} />
</View>

И примените следующие стили.

thumbContainer: {
    width: '100%',
    height: 400,
  },
  thumbnail: {
    flex: 1,
    width: undefined,
    height: undefined,
    resizeMode: 'cover'
  },
4
Hamza Waleed 16 Дек 2019 в 06:18

Подтвержденный ответ не сработал для меня, но дал мне хорошую идею.

Вероятно, это не сработало, потому что мои изображения находятся в ScrollView.

Поскольку изображения требуют ширины и высоты, моим решением было получить ширину экрана и: a) Для ширины изображения: умножить ширину экрана на% от ширины экрана, которую я хочу, чтобы мое изображение получило. б) Для высоты изображения: умножьте ширину экрана на% от ширины экрана. Я хочу, чтобы мое изображение было занято соотношением сторон высота / ширина.

const { width } = Dimensions.get('window');

<Image style={{ width: width * 0.5, height: width * 0.5 * 2.16 }}
       source={require("everydaycheckmobile/images/introduction/5-overviewdark.png")}
/>

Работает нормально, но необходимо будет динамически определить% ширины экрана, в котором вы хотите, чтобы изображение отображалось, чтобы оно работало быстро и для различных ориентаций.

2
mezod 14 Авг 2019 в 19:41

Этот код работал для меня

        <Image
            style={{width: '100%', height: 100}}
            resizeMode={'center'}
            source={{}}
        />
1
Sujeet Kumar Gupta 30 Янв 2020 в 14:23