У меня возникают проблемы при попытке установить resizeMode: 'cover' в компоненте Image

Это изображение резюмирует мою проблему:

enter image description here

Я тестирую его на Android , RN 0.55.3 , и это мой пример кода

<View style={{ width: 200, height: 200, backgroundColor: '#555' }}>
  <Image
    source={require('./bird.jpg')}
    style={{ alignSelf: 'stretch', flex: 1, resizeMode: 'cover' }}
  />
</View>

Также попробовал:

<View style={{ width: 200, height: 200, backgroundColor: '#555' }}>
      <Image
        source={require('./bird.jpg')}
        style={{ alignSelf: 'stretch', flex: 1 }}
        resizeMode='cover'
      />
</View>

Но ни один из них не работает, так есть ли способ заставить его работать должным образом?

2
MujtabaFR 13 Сен 2018 в 06:32

2 ответа

Лучший ответ

Я обнаружил, что resizeMode не работает должным образом, если я не установил width для Image

Я использовал width: 'auto', и все работало хорошо

Окончательный код:

<View style={{ width: 200, height: 200, backgroundColor: '#555' }}>
  <Image
    source={require('./bird.jpg')}
    style={{ alignSelf: 'stretch', flex: 1, resizeMode: 'cover', width: 'auto' }}
  />
</View>
3
MujtabaFR 13 Сен 2018 в 12:00

Я определяю тег изображения, как показано ниже. resizeMode вне стиля.

 <View style={{ width: 200, height: 200, backgroundColor: '#555' }}>
      <Image
        source={require('./bird.jpg')}
        style={{ alignSelf: 'stretch', flex: 1,width : 'auto'}}
        resizeMode={'cover'}
      />
 </View>

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

0
Iva 17 Апр 2019 в 05:32