Как разместить большое изображение в представлении, не растягивая и не обрезая его в React Native?

Question

Я хочу использовать Image в View, не влияя на его качество.Я не хочу обрезать изображение или растянуть его.Я также пытался использовать с ImageBackground.

https://snack.expo.io/r1kJ_rD5V?fbclid=IwAR0CVRu3YyQnbdVo9t2Vy1ygN-fGapT5coCQe-JUARJ3KNkkFNpx0KIh-OI

Пожалуйста, проверьте эту ссылку выше, если вы могли бы помочь мне с его использованием.

Answer 1

Во-первых, нам нужно получить размеры экрана для ширины экрана;

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

После этого нам нужно указать холст изображения для рисования наших изображений и установить resizeMode = {"contain"} для поддержания соотношения сторон изображения.

_renderItem = item => {
  return (
    <Image
      style={{
        width: width, // We need to give specific width to place images
        height: '100%', // We need to set height to 100%
      }}
      source={item.images}
      resizeMode={'contain'}
    />
  );
};

Теперь нам нужно разделить высоту экрана на 70:30;

return (
  <View style={styles.container}>
    <FlatList
      style={{ height: '70%' }} // We need to share the screen height with the View("A small view")
      data={images}
      renderItem={({ item }) => this._renderItem(item)}
      horizontal={true}
      showsHorizontalScrollIndicator={false}
      pagingEnabled={true}
    />
    <View style={{ height: '30%' }}>
      <Text>A small view</Text>
    </View>
  </View>
);

И последнее - установить значение отступа, чтобы отделить представление от строки состояния;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 20, // Just for iOS
  },
});

Answer 2

вы пробовали resizeMode = "содержать" или "обложка"

https://facebook.github.io/react-native/docs/image.html#resizemode