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: , height: }}  />
      </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(完全不透明)