前言
學(xué)習(xí)本系列內(nèi)容需要具備一定 HTML 開發(fā)基礎(chǔ)娜膘，沒有基礎(chǔ)的朋友可以先轉(zhuǎn)至 HTML快速入門(一) 學(xué)習(xí)
本人接觸 React Native 時間并不是特別長沪编，所以對其中的內(nèi)容和性質(zhì)了解可能會有所偏差，在學(xué)習(xí)中如果有錯會及時修改內(nèi)容，也歡迎萬能的朋友們批評指出，謝謝
文章第一版出自簡書，如果出現(xiàn)圖片或頁面顯示問題败去，煩請轉(zhuǎn)至 簡書 查看 也希望喜歡的朋友可以點(diǎn)贊，謝謝
Image組件的常見屬性
-
屬性方法
- onLoad(function）:當(dāng)圖片加載成功后烈拒，回調(diào)該方法
- onLoadStart（function）:當(dāng)圖片開始加載的時候調(diào)用該方法
- onLoadEnd(function）:當(dāng)圖片加載失敗回調(diào)該方法，不會管圖片加載成功還是失敗
- onLayout（function）:當(dāng) Image 布局發(fā)生變化會調(diào)用該方法，調(diào)用代碼
{nativeEvent: {layout: {x, y, width, height}}}- resizeMode:縮放比例荆几，（包含可選參數(shù)'cover', 'contain', 'stretch'）,當(dāng)該圖片的尺寸超過布局的尺寸時吓妆，會根據(jù)設(shè)置 Mode 進(jìn)行縮放或剪裁圖片
- source{uri:string}:進(jìn)行標(biāo)記圖片引用，該參數(shù)可以為一個網(wǎng)絡(luò)
url地址或者 一個本地路徑
-
樣式屬性
- FlexBox：支持彈性盒子風(fēng)格
- Transforms：支持屬性動畫
- backgroundcolor：背景顏色
- borderColor：邊框顏色
- borderWidth：邊框?qū)挾?/li>
- borderRadius：邊框圓角
- overflow：設(shè)置圖片尺寸超過容器可以設(shè)置顯示或隱藏('visible', 'hidden')
- tintColor：顏色設(shè)置
- opacity：設(shè)置透明度（取值范圍0.0（全透明）~ 1.0（不透明））
Image組件的介紹和使用
Image 在開發(fā)中是經(jīng)常接觸到的組件吨铸，通過它行拢，我們可以展示需要展示的圖片資源，在 React Native 中該組件可以通過多種方式價值啊圖片資源
-
在介紹幾種加載圖片資源的方式之前诞吱，先確定一下圖片的樣式舟奠，如下
imgStyle: { width:100, height:100, }-
從當(dāng)前RN項(xiàng)目中加載圖片資源，和 html 一樣房维，我們需要將圖片放到 RN 項(xiàng)目中沼瘫，這邊我創(chuàng)建了個 img 文件夾，里面包含了需要使用到的圖片資源
RN項(xiàng)目中的圖片資源- 不設(shè)置尺寸的情況下咙俩，默認(rèn)會根據(jù)圖片資源的大小來展示圖片
{/* 不設(shè)置尺寸的情況下 */} <Image source={require('./img/icon.jpg')}></Image>效果：
不設(shè)置尺寸的情況下- 我們可以通過設(shè)置尺寸或者改變 Image 的填充模式來改變所展示的圖片樣式耿戚，這邊就先約束寬高，后面會具體介紹怎么改變圖片的填充模式
{/* 設(shè)置尺寸的情況下 */} <Image source={require('./img/icon.jpg')} style={styles.imgStyle}></Image> - 不設(shè)置尺寸的情況下咙俩，默認(rèn)會根據(jù)圖片資源的大小來展示圖片
效果：
設(shè)置尺寸的情況下- 加載APP中的圖片資源
-
以iOS為例阿趁，我們根據(jù)原生的開發(fā)習(xí)慣把圖片放到 images.xcassets 中膜蛔，這樣在編譯鏈接完成后，會將里面的圖片統(tǒng)一打包以供使用
iOS圖片資源存放位置 -
如果是Android的話脖阵，需要打開目錄 android/app/src/res/ 皂股，將圖片按照安卓原生開發(fā)習(xí)慣將不同大小的圖片方便放進(jìn)四個文件夾內(nèi)
Android圖片資源存放位置 完成了圖片的導(dǎo)入，最好重新運(yùn)行模擬器命黔，以確保圖片已經(jīng)正確打包呜呐，然后就是使用圖片的時候了
-
{/* 和上面一樣，如果不預(yù)先設(shè)置尺寸的話纷铣，依舊是根據(jù)圖片資源原本的大小進(jìn)行展示 */} {/* 路徑書寫格式中 image! 是固定寫法卵史，后面直接加上圖片的名字即可，不可加 .后綴名 */} <Image source={require('image!lufei')}></Image>效果：
加載項(xiàng)目圖片- 加載來自網(wǎng)絡(luò)的圖片搜立，圖片是我在淘寶上隨便拿的圖片網(wǎng)絡(luò)地址以躯，比較大，按照默認(rèn)的填充方式啄踊，會將超出的部分剪裁掉（
注意：大括號內(nèi)的是 uri 不是 url）
{/* uri是固定寫法忧设，后面跟上圖片網(wǎng)絡(luò)URL地址的字符串即可，還有颠通，網(wǎng)絡(luò)圖片必須設(shè)置圖片的大小址晕，否則無法顯示，一般還需要配合填充方式以達(dá)到想要的效果 */} <Image source={{uri:'https://img.alicdn.com/tps/TB1OvT9NVXXXXXdaFXXXXXXXXXX-520-280.jpg'}} style={styles.imgStyle}></Image>效果：
加載網(wǎng)絡(luò)圖片效果 -
Image組件填充效果試驗(yàn)場
看完了上面的內(nèi)容顿锰，相信應(yīng)該對 Image 的使用已經(jīng)了解的差不多了吧谨垃，這里繼續(xù)為各位見解 Image 的幾種填充模式启搂，改變 Image組件 的填充模式，需要使用到
resizeMode屬性刘陶，它包含了3個可選參數(shù)胳赌，下面就以加載網(wǎng)絡(luò)圖片為例-
先加載網(wǎng)絡(luò)圖片，并設(shè)置樣式
// 導(dǎo)入Dimensions庫 var Dimensions = require('Dimensions'); // 入口 export default class TestRN extends Component { render() { return ( <View style={styles.container}> <Image source={{uri:'https://img.alicdn.com/tps/TB1OvT9NVXXXXXdaFXXXXXXXXXX-520-280.jpg'}} style={styles.imgStyle}></Image> </View> ); } } // 樣式 const styles = StyleSheet.create({ container: { backgroundColor:'blue', flex:1, }, imgStyle: { // 設(shè)置背景顏色 backgroundColor:'green', // 設(shè)置寬度 width:Dimensions.get('window').width, // 設(shè)置高度 height:150 } });效果：
初始化效果- cover(
默認(rèn))：圖片居中顯示且不拉伸圖片匙隔，超出的部分剪裁掉
imgStyle: { // 設(shè)置背景顏色 backgroundColor:'green', // 設(shè)置寬度 width:Dimensions.get('window').width, // 設(shè)置高度 height:150, // 設(shè)置圖片填充模式 resizeMode:'cover' }效果：
cover 模式效果- contain：容器完全容納圖片疑苫，圖片等比例進(jìn)行拉伸
imgStyle: { // 設(shè)置背景顏色 backgroundColor:'green', // 設(shè)置寬度 width:Dimensions.get('window').width, // 設(shè)置高度 height:150, // 設(shè)置圖片填充模式 resizeMode:'contain' }效果：
contain 填充效果- stretch：圖片被拉伸至與容器大小一致，可能會發(fā)生變形
imgStyle: { // 設(shè)置背景顏色 backgroundColor:'green', // 設(shè)置寬度 width:Dimensions.get('window').width, // 設(shè)置高度 height:150, // 設(shè)置圖片填充模式 resizeMode:'stretch' }效果：
stretch 填充效果 - cover(
Image組件模擬使用場景
-
開發(fā)中纷责，我們經(jīng)常將圖片作為背景捍掺，然后再其上面添加其他組件以豐富項(xiàng)目內(nèi)容，讓項(xiàng)目更美觀再膳，那在React Native中挺勿，很簡單就可以做到
- 依舊以上面網(wǎng)絡(luò)圖片為例，但是先來修改下樣式饵史，看起來跟美觀一些
// 樣式 const styles = StyleSheet.create({ container: { backgroundColor:'blue', flex:1, // 設(shè)置主軸對齊方式 justifyContent:'center', // 設(shè)置側(cè)軸對齊方式 alignItems:'center' }, imgStyle: { backgroundColor:'green', width:Dimensions.get('window').width, height:200, // 設(shè)置圖片填充模式 resizeMode:'stretch' } });效果：
初始化效果- 接下來满钟，我們就直接在 Image組件 上添加一個 Text組件
<Image source={{uri:'https://img.alicdn.com/tps/TB1OvT9NVXXXXXdaFXXXXXXXXXX-520-280.jpg'}} style={styles.imgStyle}> <Text style={{marginTop:100}}>這是一張來自淘寶的圖片</Text> </Image>效果：
將Image組件作為背景- 可以看出，Text組件 確實(shí)是蓋在 Image組件上胳喷，所以在React Native中湃番，將圖片作為背景就是這么簡單，并不需要進(jìn)行太復(fù)雜的操作
- 依舊以上面網(wǎng)絡(luò)圖片為例，但是先來修改下樣式饵史，看起來跟美觀一些
Image組件綜合小項(xiàng)目
-
現(xiàn)在我們就結(jié)合前面的一下教程吭露，用最通俗的方式做一個簡單的QQ消息模塊界面
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, Image } from 'react-native'; // 導(dǎo)入Dimensions庫 var Dimensions = require('Dimensions'); // 入口 export default class TestRN extends Component { render() { return ( <View style={styles.container}> {/* 因?yàn)檫€沒講到listView,這邊就用View代表Cell*/} <View style={styles.cellStyle}> {/* 頭像 */} <Image source={require('./img/lufei.jpg')} style={styles.imgStyle}></Image> {/* 昵稱 */} <Text style={styles.nameStyle}>昵稱</Text> </View> {/* 分隔線 */} <View style={styles.lineStyle}></View> <View style={styles.cellStyle}> {/* 頭像 */} <Image source={require('./img/lufei.jpg')} style={styles.imgStyle}></Image> {/* 昵稱 */} <Text style={styles.nameStyle}>昵稱</Text> </View> {/* 分隔線 */} <View style={styles.lineStyle}></View> <View style={styles.cellStyle}> {/* 頭像 */} <Image source={require('./img/lufei.jpg')} style={styles.imgStyle}></Image> {/* 昵稱 */} <Text style={styles.nameStyle}>昵稱</Text> </View> {/* 分隔線 */} <View style={styles.lineStyle}></View> </View> ); } } // 樣式 const styles = StyleSheet.create({ container: { backgroundColor:'white', flex:1, // 設(shè)置換行方式 flexWrap:'wrap' }, cellStyle: { // 尺寸 height:44, width:Dimensions.get('window').width, // 設(shè)置背景顏色 backgroundColor:'white', // 設(shè)置主軸方向 flexDirection:'row', // 設(shè)置側(cè)軸對齊方式 alignItems:'center' }, imgStyle: { width:30, height:30, // 設(shè)置圖片填充模式 resizeMode:'cover', // 設(shè)置圓角 borderRadius:15, // 設(shè)置圖片位置 marginLeft:10 }, nameStyle: { // 設(shè)置昵稱位置 marginLeft:10 }, lineStyle: { // 背景色 backgroundColor:'black', // 設(shè)置尺寸 width:Dimensions.get('window').width, height:1 } }); AppRegistry.registerComponent('TestRN', () => TestRN);
Image組件的常見屬性
-
屬性方法
- onLoad(function）:當(dāng)圖片加載成功后吠撮，回調(diào)該方法
- onLoadStart（function）:當(dāng)圖片開始加載的時候調(diào)用該方法
- onLoadEnd(function）:當(dāng)圖片加載失敗回調(diào)該方法，不會管圖片加載成功還是失敗
- onLayout（function）:當(dāng) Image 布局發(fā)生變化會調(diào)用該方法讲竿，調(diào)用代碼
{nativeEvent: {layout: {x, y, width, height}}}- resizeMode:縮放比例泥兰，（包含可選參數(shù)'cover', 'contain', 'stretch'）,當(dāng)該圖片的尺寸超過布局的尺寸時，會根據(jù)設(shè)置 Mode 進(jìn)行縮放或剪裁圖片
- source{uri:string}:進(jìn)行標(biāo)記圖片引用题禀，該參數(shù)可以為一個網(wǎng)絡(luò)
url地址或者 一個本地路徑
-
樣式屬性
- FlexBox：支持彈性盒子風(fēng)格
- Transforms：支持屬性動畫
- backgroundcolor：背景顏色
- borderColor：邊框顏色
- borderWidth：邊框?qū)挾?/li>
- borderRadius：邊框圓角
- overflow：設(shè)置圖片尺寸超過容器可以設(shè)置顯示或隱藏('visible', 'hidden')
- tintColor：顏色設(shè)置
- opacity：設(shè)置透明度（取值范圍0.0（全透明）~ 1.0（不透明））
Image組件的介紹和使用
Image 在開發(fā)中是經(jīng)常接觸到的組件鞋诗，通過它，我們可以展示需要展示的圖片資源迈嘹，在 React Native 中該組件可以通過多種方式價值啊圖片資源
-
在介紹幾種加載圖片資源的方式之前削彬，先確定一下圖片的樣式，如下
imgStyle: { width:100, height:100, }-
從當(dāng)前RN項(xiàng)目中加載圖片資源秀仲，和 html 一樣融痛，我們需要將圖片放到 RN 項(xiàng)目中，這邊我創(chuàng)建了個 img 文件夾神僵，里面包含了需要使用到的圖片資源
RN項(xiàng)目中的圖片資源- 不設(shè)置尺寸的情況下雁刷，默認(rèn)會根據(jù)圖片資源的大小來展示圖片
{/* 不設(shè)置尺寸的情況下 */} <Image source={require('./img/icon.jpg')}></Image>效果：
不設(shè)置尺寸的情況下- 我們可以通過設(shè)置尺寸或者改變 Image 的填充模式來改變所展示的圖片樣式，這邊就先約束寬高保礼，后面會具體介紹怎么改變圖片的填充模式
{/* 設(shè)置尺寸的情況下 */} <Image source={require('./img/icon.jpg')} style={styles.imgStyle}></Image> - 不設(shè)置尺寸的情況下雁刷，默認(rèn)會根據(jù)圖片資源的大小來展示圖片
效果：
設(shè)置尺寸的情況下- 加載APP中的圖片資源
-
以iOS為例沛励，我們根據(jù)原生的開發(fā)習(xí)慣把圖片放到 images.xcassets 中责语，這樣在編譯鏈接完成后，會將里面的圖片統(tǒng)一打包以供使用
iOS圖片資源存放位置 -
如果是Android的話侯勉，需要打開目錄 android/app/src/res/ 鹦筹，將圖片按照安卓原生開發(fā)習(xí)慣將不同大小的圖片方便放進(jìn)四個文件夾內(nèi)
Android圖片資源存放位置 完成了圖片的導(dǎo)入铝阐，最好重新運(yùn)行模擬器址貌，以確保圖片已經(jīng)正確打包，然后就是使用圖片的時候了
-
{/* 和上面一樣徘键，如果不預(yù)先設(shè)置尺寸的話练对，依舊是根據(jù)圖片資源原本的大小進(jìn)行展示 */} {/* 路徑書寫格式中 image! 是固定寫法，后面直接加上圖片的名字即可吹害，不可加 .后綴名 */} <Image source={require('image!lufei')}></Image>效果：
加載項(xiàng)目圖片- 加載來自網(wǎng)絡(luò)的圖片螟凭，圖片是我在淘寶上隨便拿的圖片網(wǎng)絡(luò)地址，比較大它呀，按照默認(rèn)的填充方式螺男，會將超出的部分剪裁掉（
注意：大括號內(nèi)的是 uri 不是 url）
{/* uri是固定寫法，后面跟上圖片網(wǎng)絡(luò)URL地址的字符串即可纵穿，還有下隧，網(wǎng)絡(luò)圖片必須設(shè)置圖片的大小，否則無法顯示谓媒，一般還需要配合填充方式以達(dá)到想要的效果 */} <Image source={{uri:'https://img.alicdn.com/tps/TB1OvT9NVXXXXXdaFXXXXXXXXXX-520-280.jpg'}} style={styles.imgStyle}></Image>效果：
加載網(wǎng)絡(luò)圖片效果 -
Image組件填充效果試驗(yàn)場
看完了上面的內(nèi)容淆院，相信應(yīng)該對 Image 的使用已經(jīng)了解的差不多了吧，這里繼續(xù)為各位見解 Image 的幾種填充模式句惯，改變 Image組件 的填充模式土辩，需要使用到
resizeMode屬性，它包含了3個可選參數(shù)抢野，下面就以加載網(wǎng)絡(luò)圖片為例-
先加載網(wǎng)絡(luò)圖片拷淘，并設(shè)置樣式
// 導(dǎo)入Dimensions庫 var Dimensions = require('Dimensions'); // 入口 export default class TestRN extends Component { render() { return ( <View style={styles.container}> <Image source={{uri:'https://img.alicdn.com/tps/TB1OvT9NVXXXXXdaFXXXXXXXXXX-520-280.jpg'}} style={styles.imgStyle}></Image> </View> ); } } // 樣式 const styles = StyleSheet.create({ container: { backgroundColor:'blue', flex:1, }, imgStyle: { // 設(shè)置背景顏色 backgroundColor:'green', // 設(shè)置寬度 width:Dimensions.get('window').width, // 設(shè)置高度 height:150 } });效果：
初始化效果- cover(
默認(rèn))：圖片居中顯示且不拉伸圖片，超出的部分剪裁掉
imgStyle: { // 設(shè)置背景顏色 backgroundColor:'green', // 設(shè)置寬度 width:Dimensions.get('window').width, // 設(shè)置高度 height:150, // 設(shè)置圖片填充模式 resizeMode:'cover' }效果：
cover 模式效果- contain：容器完全容納圖片指孤，圖片等比例進(jìn)行拉伸
imgStyle: { // 設(shè)置背景顏色 backgroundColor:'green', // 設(shè)置寬度 width:Dimensions.get('window').width, // 設(shè)置高度 height:150, // 設(shè)置圖片填充模式 resizeMode:'contain' }效果：
contain 填充效果- stretch：圖片被拉伸至與容器大小一致启涯，可能會發(fā)生變形
imgStyle: { // 設(shè)置背景顏色 backgroundColor:'green', // 設(shè)置寬度 width:Dimensions.get('window').width, // 設(shè)置高度 height:150, // 設(shè)置圖片填充模式 resizeMode:'stretch' }效果：
stretch 填充效果 - cover(
Image組件模擬使用場景
-
開發(fā)中，我們經(jīng)常將圖片作為背景邓厕，然后再其上面添加其他組件以豐富項(xiàng)目內(nèi)容逝嚎，讓項(xiàng)目更美觀，那在React Native中详恼，很簡單就可以做到
- 依舊以上面網(wǎng)絡(luò)圖片為例补君，但是先來修改下樣式，看起來跟美觀一些
// 樣式 const styles = StyleSheet.create({ container: { backgroundColor:'blue', flex:1, // 設(shè)置主軸對齊方式 justifyContent:'center', // 設(shè)置側(cè)軸對齊方式 alignItems:'center' }, imgStyle: { backgroundColor:'green', width:Dimensions.get('window').width, height:200, // 設(shè)置圖片填充模式 resizeMode:'stretch' } });效果：
初始化效果- 接下來昧互，我們就直接在 Image組件 上添加一個 Text組件
<Image source={{uri:'https://img.alicdn.com/tps/TB1OvT9NVXXXXXdaFXXXXXXXXXX-520-280.jpg'}} style={styles.imgStyle}> <Text style={{marginTop:100}}>這是一張來自淘寶的圖片</Text> </Image>效果：
將Image組件作為背景- 可以看出挽铁，Text組件 確實(shí)是蓋在 Image組件上伟桅，所以在React Native中，將圖片作為背景就是這么簡單叽掘，并不需要進(jìn)行太復(fù)雜的操作
- 依舊以上面網(wǎng)絡(luò)圖片為例补君，但是先來修改下樣式，看起來跟美觀一些
Image組件綜合小項(xiàng)目
-
現(xiàn)在我們就結(jié)合前面的一下教程楣铁，用最通俗的方式做一個簡單的QQ消息模塊界面單元格
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, Image } from 'react-native'; // 導(dǎo)入Dimensions庫 var Dimensions = require('Dimensions'); // 入口 export default class TestRN extends Component { render() { return ( <View style={styles.container}> {/* 因?yàn)檫€沒講到listView,這邊就用View代表Cell*/} <View style={styles.cellStyle}> {/* 頭像 */} <Image source={require('./img/lufei.jpg')} style={styles.imgStyle}></Image> {/* 昵稱 */} <Text style={styles.nameStyle}>昵稱</Text> </View> {/* 分隔線 */} <View style={styles.lineStyle}></View> <View style={styles.cellStyle}> {/* 頭像 */} <Image source={require('./img/lufei.jpg')} style={styles.imgStyle}></Image> {/* 昵稱 */} <Text style={styles.nameStyle}>昵稱</Text> </View> {/* 分隔線 */} <View style={styles.lineStyle}></View> <View style={styles.cellStyle}> {/* 頭像 */} <Image source={require('./img/lufei.jpg')} style={styles.imgStyle}></Image> {/* 昵稱 */} <Text style={styles.nameStyle}>昵稱</Text> </View> {/* 分隔線 */} <View style={styles.lineStyle}></View> </View> ); } } // 樣式 const styles = StyleSheet.create({ container: { backgroundColor:'white', flex:1, // 設(shè)置換行方式 flexWrap:'wrap' }, cellStyle: { // 尺寸 height:44, width:Dimensions.get('window').width, // 設(shè)置背景顏色 backgroundColor:'white', // 設(shè)置主軸方向 flexDirection:'row', // 設(shè)置側(cè)軸對齊方式 alignItems:'center' }, imgStyle: { width:30, height:30, // 設(shè)置圖片填充模式 resizeMode:'cover', // 設(shè)置圓角 borderRadius:15, // 設(shè)置圖片位置 marginLeft:10 }, nameStyle: { // 設(shè)置昵稱位置 marginLeft:10 }, lineStyle: { // 背景色 backgroundColor:'black', // 設(shè)置尺寸 width:Dimensions.get('window').width, height:1 } }); AppRegistry.registerComponent('TestRN', () => TestRN);效果：
簡單QQ消息界面單元格
