React Native 的Image組件學習

Image
一個用於顯示多種不一樣類型圖片的React組件，包括網絡圖片、靜態資源、臨時的本地圖片、以及本地磁盤上的圖片（如相冊）等，使用方式以下：html

return (
    <View>
      <Image
        style={styles.icon}
        source={require('./icon.png')}
      />
      <Image
        style={styles.logo}
        source={
  
  
   
   
            
   

  {uri: 'http://facebook.github.io/react/img/logo_og.png'}}
      />
    </View>
  );

屬性

source {uri: string}, number
uri是一個表示圖片的資源標識的字符串，它能夠是一個http地址或是一個本地文件路徑（使用require(相對路徑)來引用）。react

style styleandroid

Flexbox… 佈局
width 設置圖片的寬度
height 設置圖片的高度
Shadow… 陰影
Transforms… 動畫變換
backfaceVisibility ReactPropTypes.oneOf([‘visible’, ‘hidden’]) 隱藏被旋轉的圖片的背面
resizeMode Object.keys(ImageResizeMode) 下方會有介紹
backgroundColor color 設置背景色（有些圖片是透明背景時，通常會用到這個屬性）
borderBottomLeftRadius ReactPropTypes.number 設置圖片左下角的圓角
borderBottomRightRadius ReactPropTypes.number 設置圖片右下角的圓角
borderColor color 設置邊框的顏色
borderRadius number 設置圓角
borderTopLeftRadius ReactPropTypes.number 設置圖片左上角的圓角
borderTopRightRadius ReactPropTypes.number 設置圖片右上角的圓角
borderWidth number 設置圖片的邊框寬度
overflow enum(‘visible’, ‘hidden’) 設置圖片尺寸超過容器能夠設置顯示或隱藏
tintColor color 給圖片着色，這個屬性用處較多，如，一個黑白圖片，經常會點擊時變成其餘顏色圖片，此時可用此屬性
opacity number 不透明度，值在0到1之間，1表示不透明，0表示透明。
androidoverlayColor ReactPropTypes.string
當圖片有圓角的時候，指定一個顏色用於填充圓角處的空白。雖然通常狀況下圓角處是透明的，但在某些狀況下，Android並不支持圓角透明，好比：
某些resize模式好比’contain’
GIF動畫
常見的用法就是在不能圓角透明時，設置overlayColor和背景色一致。
詳細說明可參考 http://frescolib.org/docs/rounded-corners-and-circles.html

onLayout function
當元素掛載或者佈局改變的時候調用，參數爲：{nativeEvent: {layout: {x, y, width, height}}}.ios

onLoad function
加載成功完成時調用此回調函數。git

onLoadEnd function
加載結束後，不論成功仍是失敗，調用此回調函數。github

onLoadStart function
加載開始時調用。web

resizeMode enum(‘cover’, ‘contain’, ‘stretch’, ‘repeat’, ‘center’)
決定當組件尺寸和圖片尺寸不成比例的時候如何調整圖片的大小。react-native

cover: 在保持圖片寬高比的前提下縮放圖片，直到寬度和高度都大於等於容器視圖的尺寸（若是容器有padding內襯的話，則相應減去）。譯註：這樣圖片徹底覆蓋甚至超出容器，容器中不留任何空白。
contain: 在保持圖片寬高比的前提下縮放圖片，直到寬度和高度都小於等於容器視圖的尺寸（若是容器有padding內襯的話，則相應減去）。譯註：這樣圖片徹底被包裹在容器中，容器中可能留有空白
stretch: 拉伸圖片且不維持寬高比，直到寬高都恰好填滿容器。
repeat: 重複平鋪圖片直到填滿容器。圖片會維持原始尺寸。僅iOS可用。
center: 居中不拉伸。下方是例子：

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

export default class FengApp extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        
        <Text style={styles.instructions}>
          圖片的填充效果
        </Text>

         <Image
        style={styles.icon}
        source={require('./imgs/dg.jpg')}
      />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  icon:{
  backgroundColor:'red',
     width:Dimensions.get('window').width,
    height:200,
    // resizeMode:'cover',
    // resizeMode:'contain',
    // resizeMode:'stretch',
    // resizeMode:'repeat',   //ios可用，Android會報錯
    resizeMode:'center',
  },
});

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

這是repeat的，個人是安卓手機，因此會報錯
緩存

cover:( 默認)：圖片居中顯示且不拉伸圖片，超出的部分剪裁掉網絡

contain：容器徹底容納圖片，圖片等比例進行拉伸

stretch: 圖片被拉伸至與容器大小一致，可能會發生變形

center:

在實際的開發中，咱們常常將圖片做爲背景，而後再其上面添加其餘組件以豐富項目內容，讓項目更美觀，那在React Native中，
用<Image style={ {backgroundColor:'red',justifyContent:'center',width:Dimensions.get('window').width, height:200, resizeMode:'cover',}} source={require('./imgs/dg.jpg')}> <Text style={ {textAlign: 'center', color: '#333',fontSize:25, marginBottom: 5,}}> 圖片的填充效果</Text> </Image>，使用<Image></Image>雙標籤就能夠作到。
效果是這樣的：

方法

static getSize(uri: string, success: (width: number, height: number) => void, failure: (error: any) => void) #
在顯示圖片前獲取圖片的寬高(以像素爲單位)。若是圖片地址不正確或下載失敗,此方法也會失敗。

要獲取圖片的尺寸,首先須要加載或下載圖片(同時會被緩存起來)。這意味着理論上你能夠用這個方法來預加載圖片,雖然此方法並無針對這一用法進行優化,並且未來可能會換一些實現方案使得並不須要完整下載圖片便可獲取尺寸。因此更好的預加載方案是使用下面那個專門的預加載方法。

static prefetch(url: string) #
預加載一個遠程圖片(將其下載到本地磁盤緩存)。

在官網告訴咱們一個點那就是，在Android上支持GIF和WebP格式圖片的方法以下：
默認狀況下Android是不支持GIF和WebP格式的。你須要在android/app/build.gradle文件中根據須要手動添加如下模塊：

dependencies {
// 若是你須要支持Android4.0(API level 14)以前的版本
compile ‘com.facebook.fresco:animated-base-support:0.11.0’

// 若是你須要支持GIF動圖
compile ‘com.facebook.fresco:animated-gif:0.11.0’

// 若是你須要支持WebP格式，包括WebP動圖
compile ‘com.facebook.fresco:animated-webp:0.11.0’
compile ‘com.facebook.fresco:webpsupport:0.11.0’

// 若是隻須要支持WebP格式而不須要動圖
compile ‘com.facebook.fresco:webpsupport:0.11.0’
}
若是你在使用GIF的同時還使用了ProGuard，那麼須要在proguard-rules.pro中添加以下規則 :

-keep class com.facebook.imagepipeline.animated.factory.AnimatedFactoryImpl {
public AnimatedFactoryImpl(com.facebook.imagepipeline.bitmaps.PlatformBitmapFactory, com.facebook.imagepipeline.core.ExecutorSupplier);
}

Image組件就寫到這裏，若是有寫的有問題的或者不清楚的，請留下寶貴意見，記錄下學習進程，喜歡的話能夠關注點贊，給前行的小白加個油！謝謝！

本文同步分享在博客「zoepriselife316」（CSDN）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。