初使用Image，由于在React Native中圖片資源來源豐富，剛開始我也是一臉懵逼，在幾番嘗試以后，終于了然

加載項(xiàng)目目錄圖片

在項(xiàng)目目錄中新建一個(gè)Directory，命名img，拷貝一張名為‘myicon.png’的圖片

基本姿勢(shì)

加載方法：

<View>
    <Text>Image的各種姿勢(shì)</Text>
    <Image source={require('./img/myicon.png')} />
</View>

效果如下圖：

這里寫圖片描述

高級(jí)姿勢(shì)

由于RN的圖片資源文件的查找和 JS 模塊相似，該會(huì)根據(jù)填寫的圖片路徑相對(duì)于當(dāng)前的 js 文件路徑進(jìn)行搜索。RN更加好的是Packager會(huì)根據(jù)平臺(tái)選擇相應(yīng)的文件，例如 : myicon.ios.png 和 myicon.android.png 兩個(gè)文件 ( 命名方式 android 或者 ios) 。該會(huì)根據(jù) android 或者 ios 平臺(tái)選擇相應(yīng)的文件。

我有兩張圖片，分別命名為myicon1.android.png和myicon1.ios.png

分別長(zhǎng)這樣：

這里寫圖片描述

這里寫圖片描述

<View>
    <Text>Image的各種姿勢(shì)</Text>
    <Image source={require('./img/myicon1.png')} />
</View>

Android運(yùn)行結(jié)果：

這里寫圖片描述

這里寫圖片描述

<Image source={require('./img/myicon'+'.png')} />

這樣之后運(yùn)行就報(bào)錯(cuò)了 :

這里寫圖片描述

加載App中的圖片

現(xiàn)階段做原生 APP 的需求還是比較多的，不過現(xiàn)在使用了React Native 之后，我們可以進(jìn)行混合開發(fā)APP ( 一部分采用 ReactNative ，另一部分采用原生平臺(tái)代碼 ). 甚至可以使用已經(jīng)打包在APP中的圖片資源 ( 例如 :xcode ass et 文件夾以及 Android drawable 文件夾 )

以Android為例，加載ic_launcher

<View>
    <Text>Image的各種姿勢(shì)</Text>
    <Image source={{uri:'ic_launcher'}} style={{width: 100, height: 100}} />
</View>

效果如下：

這里寫圖片描述

加載網(wǎng)絡(luò)圖片

很多時(shí)候，需要加載的是網(wǎng)絡(luò)圖片，網(wǎng)絡(luò)圖片的加載方法與本地圖片的加載方法有所區(qū)別，這里必須指定圖片的大小，類似于加載App圖片

示例代碼：

<View>
    <Text>Image的各種姿勢(shì)</Text>
    <Image source={{uri:'http://avatar.csdn.net/2/1/1/1_shiquanqq.jpg'}}  style={{width:100,height:100}}/>
</View>

效果如下：

這里寫圖片描述