react native 中Image组件的resizeMode属性

参照：React Native中文网（https://www.react-native.cn/docs/image#resizemethod-android）

resizeMode：

• cover: 在保持图片宽高比的前提下缩放图片，直到宽度和高度都大于等于容器视图的尺寸（如果容器有 padding 内衬的话，则相应减去）。译注：这样图片完全覆盖甚至超出容器，容器中不留任何空白。

• contain: 在保持图片宽高比的前提下缩放图片，直到宽度和高度都小于等于容器视图的尺寸（如果容器有 padding 内衬的话，则相应减去）。译注：这样图片完全被包裹在容器中，容器中可能留有空白。

• stretch: 拉伸图片且不维持宽高比，直到宽高都刚好填满容器。

• repeat: 重复平铺图片直到填满容器。图片会维持原始尺寸，但是当尺寸超过容器时会在保持宽高比的前提下缩放到能被容器包裹。

• center: 居中不拉伸。

• TYPE	DEFAULT
  enum('cover', 'contain', 'stretch', 'repeat', 'center')	'cover'

• resizeMode:'center'  居中显示

• import React,{ Component} from 'react';
  import{
      View,
      Image,
      StyleSheet,
      Text,
      ImageBackground
  } from 'react-native'
  
  
  export default class LKImage extends Component{
      constructor(){
          super();
      }
  
      render(){
          return(
              <View>
              {/* 居中显示图片*/}
                  <View>
                    <Image
                      source={require('./../accets/images/mine.png')}
                      style={{width:400,height:400,resizeMode:'center'}}
                      />
                  </View>
              </View>
          )
      }
  }

  结果如图：

• 

  resizeMode:'repeat' 平铺

• import React,{ Component} from 'react';
  import{
      View,
      Image,
      StyleSheet,
      Text,
      ImageBackground
  } from 'react-native'
  
  
  export default class LKImage extends Component{
      constructor(){
          super();
      }
  
      render(){
          return(
              <View>
              {/* 平铺图片*/}
                  <View>
                    <Image
                      source={require('./../accets/images/mine.png')}
                      style={{width:400,height:400,resizeMode:'repeat'}}
                      />
                  </View>
              </View>
          )
      }
  }

  结果如图：

•