一、載入圖片的正確姿勢

做過原生開發和在使用App時比較注重使用者體驗的都會注意到“List中載入過程中會出現跟業務相關的Loading圖，當圖片載入成功之後會消失；當圖片載入失敗之後會展示預設的error圖”，針對這個問題，自己嘗試著在做RN的時候優化一下這些細節

RN的提供的圖片元件Image顯然是沒有提供這些優化的介面，但值得高興的是，整個元件提供了圖片載入的完成周期:

onLoadStart：當開始載入圖片呼叫該方法
onLoadEnd：當載入完成回撥該方法，不管圖片載入成功還是失敗都會呼叫該方法
onLoad：當圖片載入成功之後，回撥該方法
onError：該屬性要賦值一個function，當加載出錯執行賦值的這個方法

拿到生命週期之後我們為圖片載入定義了三個狀態：載入中、載入成功、載入失敗

接下來，我們就對官方的Image元件進行一下封裝

import React, { Component } from 'react'
import { View, Image, Animated, Easing, ViewPropTypes, StyleSheet, Platform } from 'react-native'
import { Colors } from '../Themes/index'
import Icon from '../Fonts/iconfont'

export default class
 
 LoadImage extends Component {
  static propTypes = {
    style: React.PropTypes.oneOfType([
      ViewPropTypes.style,
      React.PropTypes.number
    ]),
    source: React.PropTypes.object.isRequired,
    defaultSource: React.PropTypes.oneOfType([
      React.PropTypes.object,
      React.PropTypes.number
    ])
  }

  constructor (props) {
    super
 
(props)
    this.state = {
      loadStatus: 'pending',
      backgroundColor: new Animated.Value(0)
    }
  }

  componentWillUnmount () {
    if (undefined !== this.backgroundColorAnimated) this.backgroundColorAnimated.stop()
  }

  /**
   * 開始載入
   */
  onLoadStart () {
    // 配置載入動畫
    this.backgroundColorAnimated =
    Animated.sequence([
      Animated.timing(this.state.backgroundColor, {
        toValue: 1,
        easing: Easing.ease,
        duration: 400
      }),
      Animated.timing(this.state.backgroundColor, {
        toValue: 0,
        easing: Easing.in,
        duration: 400
      })
    ])

    this.backgroundColorAnimated.start(() => {
      this.state.loadStatus === 'pending' && this.onLoadStart()
    })
  }

  /**
   * 載入結束
   */
  onLoadEnd () {
    // if (undefined !== this.backgroundColorAnimated) this.backgroundColorAnimated.stop()
  }

  /**
   * 載入成功
   */
  handleImageLoaded () {
    this.setState({ loadStatus: 'success' })
  }

  /**
   * 載入失敗
   * @param {*} error
   */
  handleImageErrored (error) {
    console.log(error)
    this.setState({ loadStatus: 'error' })
  }

  /**
   * 渲染載入中介面
   */
  renderPending () {
    let { style } = this.props
    return (
      <Animated.View style={[style, { position: 'absolute',
        backgroundColor: this.state.backgroundColor.interpolate({
          inputRange: [0, 1],
          outputRange: ['#F7F9FB', Colors.C7]
        }) }]} />
    )
  }

  /**
   * 渲染載入失敗介面
   */
  renderError () {
    let { style, defaultSource } = this.props
    if (typeof style === 'number') {
      style = StyleSheet.flatten(style)
    }
    let iconSize = Math.min(style.height, style.width) / 3
    return (
      defaultSource
      ? <Image source={defaultSource} style={[{ position: 'absolute' }, style]} />
      : <View style={[{ justifyContent: 'center', backgroundColor: Colors.C7, position: 'absolute', alignItems: 'center' }, style]}>
        <Icon name='image' size={iconSize} color={Colors.C6} />
      </View>
    )
  }

  render () {
    let { style, source } = this.props
    let { loadStatus } = this.state
    // 相容 uri為null的情況
    if (source.hasOwnProperty('uri') && typeof source['uri'] !== 'string') {
      source = { ...source, uri: '' }
    }
    // 相容Androud無法對空字串進行處理情況
    if (Platform.OS === 'android' && source.hasOwnProperty('uri') && !source['uri']) {
      source = { ...source, uri: ' ' }
    }
    return (
      <View style={style}>
        <Image source={source} style={style}
          onLoadStart={this.onLoadStart.bind(this)}
          onLoadEnd={this.onLoadEnd.bind(this)}
          onLoad={this.handleImageLoaded.bind(this)}
          onError={this.handleImageErrored.bind(this)}
        />
        {loadStatus === 'pending' && this.renderPending()}
        {loadStatus === 'error' && this.renderError()}
      </View>
    )
  }
}

原理就是在載入未成功之前講各個狀態的展示圖片通過絕對定位覆蓋列表展示圖片，PS：圖片佔位大小wu保持一致

最新版本的程式碼做了幾點優化
1、pending樣式採用“呼吸背景”的動畫
2、生命週期控制更加完善
3、增加對uri = null的相容（null會拋異常，uri required string）
4、增加Android對uri為空字串的相容，在android下，uri為空串時不會在載入生命生期中呼叫onLoadEnd等方法

二、正常使用注意資訊

1、 [email protected] [email protected] 是怎麼回事？

一開始見到這樣的圖片以為是不同大小的，嘻嘻嘻，開啟真的確實不一樣大，但是看了文件之後才發現，這個是針對不同螢幕精度的做法

這麼用就OK了

2、require() 和 {uri: ”}

文件原文：uri是一個表示圖片的資源標識的字串，它可以是一個http地址或是一個本地檔案路徑（使用require(相對路徑)來引用）

大致掃了一下文件，知道require() 是載入本地資源的，{uri: ”} 是載入網路資源的，但是。 注意文件的細節，require()只能載入靜態資源，說白了就是本地的相對、或者絕對地址，是一個string型別的，比如’../Image/success.png’，但是，如果你把這個string賦值給了一個變數再通過require()引用肯定是不行的，這時只能通過{uri: }引用

三、 待續