Question

我在图像处理上有resizeMode，但不明白为什么需要一些行。为什么下面的行带有注释＆＃34; //为什么？＆＃34;需要获得resizeMode值才能获得荣誉？删除任何一个会打破它。

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

const Images = () =>
  <View style={styles.container}>
    <Image
      source={require('./giraffes.jpg')}
      style={styles.myImage}/>
  </View>;

const styles = StyleSheet.create({
  container: {
    flex: 1 // to fill screen
  },
  myImage: {
    flex: 1, // why?
    resizeMode: 'contain', // can also use Image.resizeMode.contain
    height: null, // why?
    width: null // why?
  }
});

AppRegistry.registerComponent('Images', () => Images);

Answer 1

您需要flex: 1，因为resizeMode用于根据外部容器调整大小。由于外部容器的flex值为1，因此当您将flex:1放在myImage上时，您会告诉它您希望它填满1 {/ 1，又名整个外容器。在null和height上使用width会覆盖图像的默认固定静态大小。

Image resizeMode需要其他样式属性

1 个答案: