Как автоматически масштабировать изображение в React Native?

#react-native

#react-native

Вопрос:

Есть картинка с фиксированным aspectRatio . Как мне изменить его размер, чтобы он соответствовал контейнеру, или рассчитать высоту, когда width: '100%' ?

Ответ №1:

Чтобы просто поместить изображение в контейнер с width= 100%, попробуйте width= 100% ResizeMode=содержать

Например

 
<Image

  resizeMode={'contain'}
  style={{ flex:1, 
  width:'100%',
        aspectRatio: 1 }}
  source={{uri: "https://www.yoursite.com/images/"   item.photo}}
/>  


  

или

 import { Image, StyleSheet, View } from 'react-native';

const image = () => (
    <View style={styles.imgContainer}>
        <Image style={styles.image} source={require('assets/images/image.png')} />
    </View>
);

const style = StyleSheet.create({
    imgContainer: {
        flexDirection: 'row'
    },
    image: {
        resizeMode: 'contain',
        flex: 1,
        aspectRatio: 1 // Your aspect ratio
    }
});
  

Комментарии:

1. Извините, я имел в виду, что я установил для изображения значение 100%, чтобы соответствовать контейнеру

2. Я вижу, я опубликовал 2-й метод, пожалуйста, посмотрите, соответствует ли он вашим потребностям.