Demo展示
上面是去加載網(wǎng)絡(luò)圖片熬尺，下面是加載本地圖片
加載圖片的幾種方式
-
加載本地圖片
-
從項(xiàng)目中加載圖片（一般是會(huì)在項(xiàng)目根目錄新建一個(gè)image文件夾蔓腐，然后放入圖片）
<Image source={require('./image/ic_launcher.png')} style={{width: 40, height: 40}}/> -
從APP中加載圖片一（在Android目錄一般會(huì)新建一個(gè)drawable文件夾）
<Image source={require('image!ic_launcher')} style={{width: 40, height: 40}}/> -
從APP中加載圖片二（同上）
<Image source={{uri: 'ic_launcher'}} style={{width: 40, height: 40}}/>
-
-
加載網(wǎng)絡(luò)圖片
<Image source={{uri: 'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png'}} style={{width: 300, height: 90}}/>
注意
1、在RN中瓮恭，Image組件的默認(rèn)大小是0活鹰，是不顯示圖片的，所以我們需要給定圖片的寬高
2派哲、require 中的圖片名稱必須為一個(gè)靜態(tài)的字符串信息臼氨，不能在 require 中進(jìn)行拼接
常用屬性
resizeMode ：圖片的適應(yīng)模式。也就是圖片的展示樣式芭届。有三種：cover（覆蓋）储矩、contain（包裹）、stretch（拉伸）
一般作圖片背景的話褂乍，我們可以用cover模式持隧，大部分情況都是用contain，至于拉伸的話逃片，看具體需求屡拨，不過一張圖片被拉伸了也就不好看了。
Demo實(shí)現(xiàn)
新建一個(gè)networkImage.js
import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
Image,
TouchableOpacity,
View
} from 'react-native';
class NetWorkImageComponent extends Component {
constructor(props) {
super(props);
//通過props屬性來獲取傳遞過來的數(shù)據(jù)
var imgUris = this.props.imgUris;
this.state = {
//初始化數(shù)據(jù)
imgUris: imgUris,
count: 0
};
}
goNext(count) {
count++;
if (count < this.state.imgUris.length) {
this.setState({
count: count
});
}
}
goPrevious(count) {
count--;
if (count >= 0) {
this.setState({
count: count
});
}
}
render() {
return (
<View>
<View style={styles.image}>
<Image style={styles.img}
source={{uri: this.state.imgUris[this.state.count]}}
resizeMode="contain">
</Image>
</View>
<View style={styles.btnContainer}>
<TouchableOpacity onPress={this.goPrevious.bind(this, this.state.count)}>
<View style={[styles.btn, {marginRight: 30}]}>
<Text>上一張</Text>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={this.goNext.bind(this, this.state.count)}>
<View style={[styles.btn, {marginLeft: 30}]}>
<Text>下一張</Text>
</View>
</TouchableOpacity>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
image: {
width: 250,
height: 200,
borderWidth: 1,
borderColor: '#ccc',
justifyContent: 'center',
alignItems: 'center'
},
img: {
width: 200,
height: 150
},
btnContainer: {
flexDirection: 'row',
justifyContent: 'center',
marginTop: 30
},
btn: {
width: 80,
height: 30,
borderColor: '#0089FF',
borderWidth: 1,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 10,
}
});
module.exports = NetWorkImageComponent;
再創(chuàng)建一個(gè)localImage.js
import React, {Component} from 'react';
import {
StyleSheet,
Text,
Image,
View
} from 'react-native';
class LocalImageComponent extends Component {
render() {
return (
<View>
<View style={styles.flex}>
<Image source={this.props.img}
style={styles.image}/>
<Text style={styles.text}>{this.props.text}</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
marginTop: 20
},
flex: {
justifyContent: 'center',
alignItems: 'center'
},
image: {
width: 45,
height: 45
},
text: {
fontSize: 13,
fontWeight: 'bold',
marginTop: 5
}
});
module.exports = LocalImageComponent;
最后是主js文件
import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image
} from 'react-native';
var NetWorkImageComponent = require('./networkImage');
var LocalImageComponent = require('./localImage');
var imgUris = ['http://vczero.github.io/ctrip/hua2.png',
'http://vczero.github.io/ctrip/nian2.png',
'http://b.hiphotos.baidu.com/zhidao/pic/item/a6efce1b9d16fdfafee0cfb5b68f8c5495ee7bd8.jpg',
'http://pic47.nipic.com/20140830/7487939_180041822000_2.jpg'];
var imgPaths1 = [require('./image/one.png'), require('./image/two.png'),
require('./image/three.png'), require('./image/four.png'),
require('./image/five.png')];
var imgPaths2 = [require('./image/six.png'), require('./image/seven.png'),
require('./image/eight.png'), require('./image/nine.png'),
require('./image/ten.png')];
var imgTexts1 = ['美食', '電影', '酒店', 'KTV', '外賣'];
var imgTexts2 = ['優(yōu)惠買單', '周邊游', '休閑娛樂', '今日新單', '麗人'];
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
},
localImgContainer: {
flexDirection: 'row',
},
localItemImg: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
var data1 = [];
var data2 = [];
for (var i in imgPaths1) {
var localImg1 = (
<View style={styles.localItemImg} key={i}>
<LocalImageComponent img={imgPaths1[i]} text={imgTexts1[i]}/>
</View>
);
data1.push(localImg1);
}
for (var j in imgPaths2) {
var localImg2 = (
// 加100為了與上面的數(shù)組的key不一樣褥实，可以加任意數(shù)
<View style={styles.localItemImg} key={j + 100}>
<LocalImageComponent img={imgPaths2[j]} text={imgTexts2[j]}/>
</View>
);
data2.push(localImg2);
}
class RNStudyFive extends Component {
render() {
return (
<View >
{/*加載網(wǎng)絡(luò)圖片*/}
<View style={[styles.container, {marginTop: 40}]}>
<NetWorkImageComponent imgUris={imgUris}/>
</View>
{/*加載本地圖片*/}
<View style={{marginTop: 40}}>
<View style={[styles.localImgContainer]}>
{data1}
</View>
<View style={[styles.localImgContainer, {marginTop: 20}]}>
{data2}
</View>
</View>
</View>
);
}
}
AppRegistry.registerComponent('RNStudyFive', () => RNStudyFive);
好了呀狼，我們的Image組件就學(xué)習(xí)完了。
寫在最后
當(dāng)把這篇文章寫完后损离，看著自己擼的代碼哥艇，驟然間發(fā)現(xiàn)自己的代碼寫得好low。像其中的數(shù)據(jù)傳遞僻澎，文字和圖片路徑完全可以放在一個(gè)數(shù)組里面貌踏，當(dāng)然最好的方式的是用json文件，還有窟勃，加載圖片的方式祖乳，上文有提到過可以用uri的方式來加載，而代碼中是用require的方式秉氧，不僅丑眷昆，而且重復(fù)了很多事情，最后一個(gè)就是加載下面的10個(gè)item項(xiàng)谬运，這樣加載不利于性能的提升隙赁。當(dāng)然我們可以用listview來實(shí)現(xiàn)。后面肯定會(huì)去學(xué)習(xí)listview的梆暖。說這么多伞访，我想表達(dá)的是對于新學(xué)一門語言時(shí)，剛開始肯定會(huì)做一些自己以后看起來很匪夷所思的事情轰驳，不過這也讓我們看到了自己的成長過程厚掷，記錄自己的成長的方法就是寫博客了弟灼。好了。煽了一點(diǎn)情冒黑，繼續(xù)學(xué)習(xí)RN中...田绑。
歡迎各位拍磚啊!
