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>
          )
      }
  }

  結果如圖：

•