React Native组件学习之Image
2016-09-12 本文已影响404人
BlainPeng
Demo展示
image.gif
上面是去加载网络图片，下面是加载本地图片
加载图片的几种方式
-
加载本地图片
-
从项目中加载图片（一般是会在项目根目录新建一个image文件夹，然后放入图片）
<Image source={require('./image/ic_launcher.png')} style={{width: 40, height: 40}}/> -
从APP中加载图片一（在Android目录一般会新建一个drawable文件夹）
<Image source={require('image!ic_launcher')} style={{width: 40, height: 40}}/> -
从APP中加载图片二（同上）
<Image source={{uri: 'ic_launcher'}} style={{width: 40, height: 40}}/>
-
-
加载网络图片
<Image source={{uri: 'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png'}} style={{width: 300, height: 90}}/>
注意
1、在RN中，Image组件的默认大小是0，是不显示图片的，所以我们需要给定图片的宽高
2、require 中的图片名称必须为一个静态的字符串信息，不能在 require 中进行拼接
常用属性
resizeMode ：图片的适应模式。也就是图片的展示样式。有三种：cover（覆盖）、contain（包裹）、stretch（拉伸）
一般作图片背景的话，我们可以用cover模式，大部分情况都是用contain，至于拉伸的话，看具体需求，不过一张图片被拉伸了也就不好看了。
Demo实现
新建一个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属性来获取传递过来的数据
var imgUris = this.props.imgUris;
this.state = {
//初始化数据
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;
再创建一个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 = ['优惠买单', '周边游', '休闲娱乐', '今日新单', '丽人'];
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为了与上面的数组的key不一样，可以加任意数
<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 >
{/*加载网络图片*/}
<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组件就学习完了。
写在最后
当把这篇文章写完后，看着自己撸的代码，骤然间发现自己的代码写得好low。像其中的数据传递，文字和图片路径完全可以放在一个数组里面，当然最好的方式的是用json文件，还有，加载图片的方式，上文有提到过可以用uri的方式来加载，而代码中是用require的方式，不仅丑，而且重复了很多事情，最后一个就是加载下面的10个item项，这样加载不利于性能的提升。当然我们可以用listview来实现。后面肯定会去学习listview的。说这么多，我想表达的是对于新学一门语言时，刚开始肯定会做一些自己以后看起来很匪夷所思的事情，不过这也让我们看到了自己的成长过程，记录自己的成长的方法就是写博客了。好了。煽了一点情，继续学习RN中...。
欢迎各位拍砖啊!
