ReactNative中Image組件加載方式

Image組件加載方式

從當前項目中加載

• 圖片資源文件的查找和JS模塊相似，會根據填寫的圖片路徑相對於當前的js文件路徑進行搜索。
• React Naive的Packager會根據平臺選擇相應的文件，例如:my_icon.ios.png和my_icon.android.png兩個文件(命名方式android或者ios)，會分別根據android或者ios平臺選擇相應的文件。
• Packager會打包所有的圖片並且依據屏幕精度提供對應的資源。譬如說，iPhone 5s會使用[email protected]，而Nexus 5上則會使用[email protected]。如果沒有圖片恰好滿足屏幕分辨率，則會自動選中最接近的一個圖片。
• 注意：如果你添加圖片的時候packager正在運行，可能需要重啓packager以便能正確引入新添加的圖片。
• 這樣處理的優勢：
  
  • iOS和Android一致的文件系統。
  • 圖片和JS代碼處在相同的文件夾，這樣組件就可以包含自己所用的圖片而不用單獨去設置。
  • 不需要全局命名。你不用再擔心圖片名字的衝突問題了。
  • 只有實際被用到（即被require）的圖片纔會被打包到你的app。
  • 與訪問網絡圖片相比，Packager可以得知圖片大小了，不需要在代碼裏再聲明一遍尺寸。
  • 現在通過npm來分發組件或庫可以包含圖片了。
  • 注意：爲了使新的圖片資源機制正常工作，require中的圖片名字必須是一個靜態字符串（不能使用變量！因爲require是在編譯時期執行，而非運行時期執行！）。

export default class App5 extends Component<{}> {
  render() {
    return (
      <View style={styles.container}>
         <Image source={require('./image/NO.png')} style={{width: 120, height: 120}}  />
      </View>
    );
  }
}

加載使用APP中的圖片

如果你在編寫一個混合App（一部分UI使用React Native，而另一部分使用平臺原生代碼），也可以使用已經打包到App中的圖片資源（以拖拽的方式放置在Xcode的asset類目中，或是放置在Android的drawable目錄裏）。注意此時只使用文件名，不帶路徑也不帶後綴

• 在iOS中

<View style={styles.container}>
         <Image source={{uri: 'BG1'}} style={{width: 120, height: 120}} />
      </View>

• 在Android中

 <View style={styles.container}>
         <Image source={{uri: 'asset:/BG1.png'}} style={{width: 40, height: 40}} />
      </View>

加載來自網絡的圖片

• 客戶端的很多圖片資源基本上都是實時通過網絡進行獲取的，但是需要指定圖片的尺寸大小

• 強烈建議你使用https以滿足iOS App Transport Security 的要求

• 關於resizeMode屬性

  • Image.resizeMode.cover：圖片居中顯示，沒有被拉伸，超出部分被截斷
  • Image.resizeMode.contain：容器完全容納圖片，圖片等比例進拉伸
  • Image.resizeMode.stretch： 圖片被拉伸適應容器大小，有可能會發生變形

<View style={styles.container}>
         <Image source={{uri:'https://www.baidu.com/img/bd_logo1.png'}}style={{width:100, height:100, resizeMode: Image.resizeMode.contain}}/>
      </View>

設置背景圖片

<View style={styles.container}>
         <ImageBackground source={{uri:'https://www.baidu.com/img/bd_logo1.png'}} style={{marginTop:20,
    marginLeft:20,flex:1,width:200, height:100,}}>
           <Text style={{marginTop: 60, backgroundColor: 'red'}}>下面是背景圖片</Text>
        </ImageBackground>
      </View>

效果：

Image組件的常見屬性

• onLayout(function)
  當Image佈局發生改變的，會進行調用該方法，調用的代碼爲:{nativeEvent: {layout: {x, y, width, height}}}.

• onLoad (function)
  當圖片加載成功之後，回調該方法

• onLoadEnd (function)
  當圖片加載失敗回調該方法，該不會管圖片加載成功還是失敗
• onLoadStart (fcuntion)
  當圖片開始加載的時候調用該方法
• resizeMode
  縮放比例,可選參數(‘cover’, ‘contain’, ‘stretch’) 該當圖片的尺寸超過佈局的尺寸的時候，會根據設置Mode進行縮放或者裁剪圖片
• source{uri:string}
  進行標記圖片的引用，該參數可以爲一個網絡url地址或者一個本地的路徑

Image組件的樣式風格屬性

• FlexBox 支持彈性盒子風格
• Transforms 支持屬性動畫
• backgroundColor 背景顏色
• borderColor 邊框顏色
• borderWidth 邊框寬度
• borderRadius 邊框圓角
• overflow 設置圖片尺寸超過容器可以設置顯示或者隱藏(‘visible’,’hidden’)
• tintColor 顏色設置
• opacity 設置不透明度0.0(透明)-1.0(完全不透明)