React-Native 之常用組件Image使用

本文轉載自查看原文 2016-10-29 17:43 12615 Image組件/ ReactNative Image/ image組件使用/ React Native/ RN image

前言

學習本系列內容需要具備一定 HTML 開發基礎，沒有基礎的朋友可以先轉至 HTML快速入門(一) 學習
本人接觸 React Native 時間並不是特別長，所以對其中的內容和性質了解可能會有所偏差，在學習中如果有錯會及時修改內容，也歡迎萬能的朋友們批評指出，謝謝
文章第一版出自簡書，如果出現圖片或頁面顯示問題，煩請轉至簡書查看也希望喜歡的朋友可以點贊，謝謝

Image組件的常見屬性

屬性方法
- onLoad(function）:當圖片加載成功后，回調該方法
- onLoadStart（function）:當圖片開始加載的時候調用該方法
- onLoadEnd(function）:當圖片加載失敗回調該方法，不會管圖片加載成功還是失敗
- onLayout（function）:當 Image 布局發生變化會調用該方法，調用代碼
```
	{nativeEvent: {layout: {x, y, width, height}}}
```
- resizeMode:縮放比例，（包含可選參數'cover', 'contain', 'stretch'）,當該圖片的尺寸超過布局的尺寸時，會根據設置 Mode 進行縮放或剪裁圖片
- source{uri:string}:進行標記圖片引用，該參數可以為一個網絡 url地址 或者一個本地路徑
樣式屬性
- FlexBox：支持彈性盒子風格
- Transforms：支持屬性動畫
- backgroundcolor：背景顏色
- borderColor：邊框顏色
- borderWidth：邊框寬度
- borderRadius：邊框圓角
- overflow：設置圖片尺寸超過容器可以設置顯示或隱藏('visible', 'hidden')
- tintColor：顏色設置
- opacity：設置透明度（取值范圍0.0（全透明）~ 1.0（不透明））

Image組件的介紹和使用

Image 在開發中是經常接觸到的組件，通過它，我們可以展示需要展示的圖片資源，在 React Native 中該組件可以通過多種方式價值啊圖片資源
在介紹幾種加載圖片資源的方式之前，先確定一下圖片的樣式，如下
```
	imgStyle: {
    	width:100,
    	height:100,
	}
	
```
- 從當前RN項目中加載圖片資源，和 html 一樣，我們需要將圖片放到 RN 項目中，這邊我創建了個 img 文件夾，里面包含了需要使用到的圖片資源
  - 不設置尺寸的情況下，默認會根據圖片資源的大小來展示圖片
```
	{/* 不設置尺寸的情況下 */}
	<Image source={require('./img/icon.jpg')}></Image>	
```
  效果：
  - 我們可以通過設置尺寸或者改變 Image 的填充模式來改變所展示的圖片樣式，這邊就先約束寬高，后面會具體介紹怎么改變圖片的填充模式
```
	{/* 設置尺寸的情況下 */}
	<Image source={require('./img/icon.jpg')} style={styles.imgStyle}></Image>
```
效果：
- 加載APP中的圖片資源
  - 以iOS為例，我們根據原生的開發習慣把圖片放到 images.xcassets 中，這樣在編譯鏈接完成后，會將里面的圖片統一打包以供使用
  - 如果是Android的話，需要打開目錄 android/app/src/res/ ，將圖片按照安卓原生開發習慣將不同大小的圖片方便放進四個文件夾內
  - 完成了圖片的導入，最好重新運行模擬器，以確保圖片已經正確打包，然后就是使用圖片的時候了
```
	{/* 和上面一樣，如果不預先設置尺寸的話，依舊是根據圖片資源原本的大小進行展示 */}
	{/* 路徑書寫格式中 image! 是固定寫法，后面直接加上圖片的名字即可，不可加 .后綴名 */}
	<Image source={require('image!lufei')}></Image>
```
效果：
- 加載來自網絡的圖片，圖片是我在淘寶上隨便拿的圖片網絡地址，比較大，按照默認的填充方式，會將超出的部分剪裁掉（注意：大括號內的是 uri 不是 url）
```
	{/* uri是固定寫法，后面跟上圖片網絡URL地址的字符串即可，還有，網絡圖片必須設置圖片的大小，否則無法顯示，一般還需要配合填充方式以達到想要的效果 */}
	<Image source={{uri:'https://img.alicdn.com/tps/TB1OvT9NVXXXXXdaFXXXXXXXXXX-520-280.jpg'}} style={styles.imgStyle}></Image>
	
```
效果：

Image組件填充效果試驗場

看完了上面的內容，相信應該對 Image 的使用已經了解的差不多了吧，這里繼續為各位見解 Image 的幾種填充模式，改變 Image組件的填充模式，需要使用到 resizeMode屬性，它包含了3個可選參數，下面就以加載網絡圖片為例

先加載網絡圖片，並設置樣式

	// 導入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: {
			// 設置背景顏色
     		backgroundColor:'green',
     		// 設置寬度
    		width:Dimensions.get('window').width,
    		// 設置高度
    		height:150
		}
	});

效果：
初始化效果

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

	imgStyle: {
			// 設置背景顏色
     		backgroundColor:'green',
     		// 設置寬度
    		width:Dimensions.get('window').width,
    		// 設置高度
    		height:150,
    		// 設置圖片填充模式
    		resizeMode:'cover'
		}

效果：
cover 模式效果

contain：容器完全容納圖片，圖片等比例進行拉伸

	imgStyle: {
			// 設置背景顏色
     		backgroundColor:'green',
     		// 設置寬度
    		width:Dimensions.get('window').width,
    		// 設置高度
    		height:150,
    		// 設置圖片填充模式
    		resizeMode:'contain'
		}

效果：
contain 填充效果

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

	imgStyle: {
			// 設置背景顏色
     		backgroundColor:'green',
     		// 設置寬度
    		width:Dimensions.get('window').width,
    		// 設置高度
    		height:150,
    		// 設置圖片填充模式
    		resizeMode:'stretch'
		}

效果：
stretch 填充效果

Image組件模擬使用場景

開發中，我們經常將圖片作為背景，然后再其上面添加其他組件以豐富項目內容，讓項目更美觀，那在React Native中，很簡單就可以做到

依舊以上面網絡圖片為例，但是先來修改下樣式，看起來跟美觀一些

	// 樣式
	const styles = StyleSheet.create({
		container: {
    		backgroundColor:'blue',
    		flex:1,
    		// 設置主軸對齊方式
    		justifyContent:'center',
    		// 設置側軸對齊方式
    		alignItems:'center'
	},

		imgStyle: {
    		backgroundColor:'green',
    		width:Dimensions.get('window').width,
    		height:200,
    		// 設置圖片填充模式
    		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組件確實是蓋在 Image組件上，所以在React Native中，將圖片作為背景就是這么簡單，並不需要進行太復雜的操作

Image組件綜合小項目

現在我們就結合前面的一下教程，用最通俗的方式做一個簡單的QQ消息模塊界面

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

	// 導入Dimensions庫
	var Dimensions = require('Dimensions');

	// 入口
	export default class TestRN extends Component {
	render() {
		return (
  			<View style={styles.container}>
      			{/* 因為還沒講到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,
    		// 設置換行方式
    		flexWrap:'wrap'
		},

		cellStyle: {
    		// 尺寸
    		height:44,
    		width:Dimensions.get('window').width,
    		// 設置背景顏色
    		backgroundColor:'white',
    		// 設置主軸方向
    		flexDirection:'row',
    		// 設置側軸對齊方式
    		alignItems:'center'
		},

		imgStyle: {
    		width:30,
    		height:30,
    		// 設置圖片填充模式
    		resizeMode:'cover',
    		// 設置圓角
    		borderRadius:15,
    		// 設置圖片位置
    		marginLeft:10
		},

		nameStyle: {
    		// 設置昵稱位置
    		marginLeft:10
		},

		lineStyle: {
    		// 背景色
    		backgroundColor:'black',
    		// 設置尺寸
    		width:Dimensions.get('window').width,
    		height:1
		}

	});

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

Image組件的常見屬性

屬性方法
- onLoad(function）:當圖片加載成功后，回調該方法
- onLoadStart（function）:當圖片開始加載的時候調用該方法
- onLoadEnd(function）:當圖片加載失敗回調該方法，不會管圖片加載成功還是失敗
- onLayout（function）:當 Image 布局發生變化會調用該方法，調用代碼
```
	{nativeEvent: {layout: {x, y, width, height}}}
```
- resizeMode:縮放比例，（包含可選參數'cover', 'contain', 'stretch'）,當該圖片的尺寸超過布局的尺寸時，會根據設置 Mode 進行縮放或剪裁圖片
- source{uri:string}:進行標記圖片引用，該參數可以為一個網絡 url地址 或者一個本地路徑
樣式屬性
- FlexBox：支持彈性盒子風格
- Transforms：支持屬性動畫
- backgroundcolor：背景顏色
- borderColor：邊框顏色
- borderWidth：邊框寬度
- borderRadius：邊框圓角
- overflow：設置圖片尺寸超過容器可以設置顯示或隱藏('visible', 'hidden')
- tintColor：顏色設置
- opacity：設置透明度（取值范圍0.0（全透明）~ 1.0（不透明））

Image組件的介紹和使用

Image 在開發中是經常接觸到的組件，通過它，我們可以展示需要展示的圖片資源，在 React Native 中該組件可以通過多種方式價值啊圖片資源
在介紹幾種加載圖片資源的方式之前，先確定一下圖片的樣式，如下
```
	imgStyle: {
    	width:100,
    	height:100,
	}
	
```
- 從當前RN項目中加載圖片資源，和 html 一樣，我們需要將圖片放到 RN 項目中，這邊我創建了個 img 文件夾，里面包含了需要使用到的圖片資源
  - 不設置尺寸的情況下，默認會根據圖片資源的大小來展示圖片
```
	{/* 不設置尺寸的情況下 */}
	<Image source={require('./img/icon.jpg')}></Image>	
```
  效果：
  - 我們可以通過設置尺寸或者改變 Image 的填充模式來改變所展示的圖片樣式，這邊就先約束寬高，后面會具體介紹怎么改變圖片的填充模式
```
	{/* 設置尺寸的情況下 */}
	<Image source={require('./img/icon.jpg')} style={styles.imgStyle}></Image>
```
效果：
- 加載APP中的圖片資源
  - 以iOS為例，我們根據原生的開發習慣把圖片放到 images.xcassets 中，這樣在編譯鏈接完成后，會將里面的圖片統一打包以供使用
  - 如果是Android的話，需要打開目錄 android/app/src/res/ ，將圖片按照安卓原生開發習慣將不同大小的圖片方便放進四個文件夾內
  - 完成了圖片的導入，最好重新運行模擬器，以確保圖片已經正確打包，然后就是使用圖片的時候了
```
	{/* 和上面一樣，如果不預先設置尺寸的話，依舊是根據圖片資源原本的大小進行展示 */}
	{/* 路徑書寫格式中 image! 是固定寫法，后面直接加上圖片的名字即可，不可加 .后綴名 */}
	<Image source={require('image!lufei')}></Image>
```
效果：
- 加載來自網絡的圖片，圖片是我在淘寶上隨便拿的圖片網絡地址，比較大，按照默認的填充方式，會將超出的部分剪裁掉（注意：大括號內的是 uri 不是 url）
```
	{/* uri是固定寫法，后面跟上圖片網絡URL地址的字符串即可，還有，網絡圖片必須設置圖片的大小，否則無法顯示，一般還需要配合填充方式以達到想要的效果 */}
	<Image source={{uri:'https://img.alicdn.com/tps/TB1OvT9NVXXXXXdaFXXXXXXXXXX-520-280.jpg'}} style={styles.imgStyle}></Image>
	
```
效果：

Image組件填充效果試驗場

看完了上面的內容，相信應該對 Image 的使用已經了解的差不多了吧，這里繼續為各位見解 Image 的幾種填充模式，改變 Image組件的填充模式，需要使用到 resizeMode屬性，它包含了3個可選參數，下面就以加載網絡圖片為例

先加載網絡圖片，並設置樣式

	// 導入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: {
			// 設置背景顏色
     		backgroundColor:'green',
     		// 設置寬度
    		width:Dimensions.get('window').width,
    		// 設置高度
    		height:150
		}
	});

效果：
初始化效果

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

	imgStyle: {
			// 設置背景顏色
     		backgroundColor:'green',
     		// 設置寬度
    		width:Dimensions.get('window').width,
    		// 設置高度
    		height:150,
    		// 設置圖片填充模式
    		resizeMode:'cover'
		}

效果：
cover 模式效果

contain：容器完全容納圖片，圖片等比例進行拉伸

	imgStyle: {
			// 設置背景顏色
     		backgroundColor:'green',
     		// 設置寬度
    		width:Dimensions.get('window').width,
    		// 設置高度
    		height:150,
    		// 設置圖片填充模式
    		resizeMode:'contain'
		}

效果：
contain 填充效果

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

	imgStyle: {
			// 設置背景顏色
     		backgroundColor:'green',
     		// 設置寬度
    		width:Dimensions.get('window').width,
    		// 設置高度
    		height:150,
    		// 設置圖片填充模式
    		resizeMode:'stretch'
		}

效果：
stretch 填充效果

Image組件模擬使用場景

開發中，我們經常將圖片作為背景，然后再其上面添加其他組件以豐富項目內容，讓項目更美觀，那在React Native中，很簡單就可以做到

依舊以上面網絡圖片為例，但是先來修改下樣式，看起來跟美觀一些

	// 樣式
	const styles = StyleSheet.create({
		container: {
    		backgroundColor:'blue',
    		flex:1,
    		// 設置主軸對齊方式
    		justifyContent:'center',
    		// 設置側軸對齊方式
    		alignItems:'center'
	},

		imgStyle: {
    		backgroundColor:'green',
    		width:Dimensions.get('window').width,
    		height:200,
    		// 設置圖片填充模式
    		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組件確實是蓋在 Image組件上，所以在React Native中，將圖片作為背景就是這么簡單，並不需要進行太復雜的操作

Image組件綜合小項目

現在我們就結合前面的一下教程，用最通俗的方式做一個簡單的QQ消息模塊界面單元格

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

	// 導入Dimensions庫
	var Dimensions = require('Dimensions');

	// 入口
	export default class TestRN extends Component {
	render() {
		return (
  			<View style={styles.container}>
      			{/* 因為還沒講到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,
    		// 設置換行方式
    		flexWrap:'wrap'
		},

		cellStyle: {
    		// 尺寸
    		height:44,
    		width:Dimensions.get('window').width,
    		// 設置背景顏色
    		backgroundColor:'white',
    		// 設置主軸方向
    		flexDirection:'row',
    		// 設置側軸對齊方式
    		alignItems:'center'
		},

		imgStyle: {
    		width:30,
    		height:30,
    		// 設置圖片填充模式
    		resizeMode:'cover',
    		// 設置圓角
    		borderRadius:15,
    		// 設置圖片位置
    		marginLeft:10
		},

		nameStyle: {
    		// 設置昵稱位置
    		marginLeft:10
		},

		lineStyle: {
    		// 背景色
    		backgroundColor:'black',
    		// 設置尺寸
    		width:Dimensions.get('window').width,
    		height:1
		}

	});

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

效果：
簡單QQ消息界面單元格

Image組件的使用就先簡單介紹到這里，在后續的文章中，會在實際的開發場景中帶大家更多更細致地講解 Image組件,如果你覺得哪里寫得不好或者有誤，麻煩留言或者用郵箱的方式聯系我，當然遇到問題也可以，最后如果喜歡我的文章，還請點個贊並關注，讀者的肯定是對我們筆者最大的鼓勵，謝謝！

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 React Native 組件之Image 【React-Native】React-Native組件樣式合集使用react-native中的Navigator組件進行頁面導航 React-Native之輪播組件looped-carousel的介紹與使用 React-Native之截圖組件view-shot的介紹與使用 react-native Image 組件加載網絡圖片無法顯示出來 React-Native之ViewPagerAndroid的使用 react-native 之ScrollView的使用 React-Native 之 TextInput使用 React-Native 之 ListView使用