如何在视图中放置大图像而不在React Native中拉伸/裁剪图像？

Question

I want to use a Image in a View without affecting it's quality. I don't want to crop the Image or stretch it. I also tried using with ImageBackground .

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

Please check this above link if you could help me using it.

Answer 1

did you try resizeMode="contain" or "cover"

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

Answer 2

Firsly, we need to get screen dimensions for screen width;

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

After that, we need to specify an image canvas for drawing our images and set resizeMode = {"contain"} to maintain the image's aspect ratio.

_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'}
    />
  );
};

Now we need to divide the screen height to 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>
);

And last thing is to set a padding value to separate the view from status bar;

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