react native学习篇之图片学习

一、本地图片加载

完成一个图片列表的加载

1、可以将图片放入至iOS和Android的相对应的文件夹中

在IOS文件夹的Images.xcassets下新增一个


注意:iOS 中的图片需要Xcode中在img中导入图片进去,复制进去的图片加载不了

二、android中可以在/Android/app/src/res/中新建drawable文件夹存放图片就可以


3、在项目中创建一个json文件,然后在需要的页面中require引入

json格式如下:

{
"data":[
{
"icon": "phone1",
"title":"苹果手机"
},
{
"icon": "phone2",
"title":"小米手机"
},
{
"icon": "phone3",
"title":"荣耀手机"
},
{
"icon": "phone4",
"title":"OPPO手机"
},
{
"icon": "phone5",
"title":"VIVO手机"
},
{
"icon": "phone6",
"title":"魅族手机"
}
]
}

4、在创建的页面中引入后就可以使用了,写法如下:

import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Image,
TouchableOpacity
} from 'react-native';
//import Icon from 'react-native-vector-icons/FontAwesome';
import Icon from 'react-native-vector-icons/Ionicons';

//导入json数据
var PhoneData = require('../../assets/json/phoneData.json')

export default class MainPage extends Component {
static navigationOptions = {
headerTitle:'我的',
tabBarLabel: '我的',
headerTitleStyle:{
fontSize:18,
fontWeight:'400',
alignSelf:'center',
},
headerStyle: {
height: 0, //去掉标题
},
tabBarIcon:({ tintColor, focused }) => (
<Icon
name={focused ? 'ios-contact' : 'ios-contact-outline'}
size={26}
style={{ color: tintColor }}
/>
),
};
render() {
// 获取 navigate 属性
// 跳转到详情页,并传递两个数据 title、des。
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
<Text>手机列表</Text>
<Image source={require('../../assets/image/phone1.jpg')} style={styles.img1} />
{this.renderAllPhone()}
</View>
);
}

//返回list
renderAllPhone(){
var allPhone = [];
//遍历数据
for(var i=0;i<PhoneData.data.length; i++){
var phone = PhoneData.data[i];
//直接转入数组
allPhone.push(
<View key={i} style={styles.outViewStyle}>
<Image source={{uri:phone.icon}} style={styles.imageStyle} />
<Text style={styles.textTitStyle}>
{phone.title}
</Text>
</View>
)
}
//返回数据
return allPhone;

}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
outViewStyle:{

},
imageStyle:{
width:80,
height:80
},
img1:{
width:100,
height:100
},
textTitStyle:{
}

});


在模拟器中显示如下(还未加样式,有点不好看)


整个本地App中的静态资源图片就引入成功啦

二、本地图片加载

<View style={styles.container}>
<Text>手机列表</Text>
<Image source={require('../../assets/image/phone1.jpg')} style={styles.img1} />
{this.renderAllPhone()}
</View>

如上图:相当于在本地根目录下找到该图片。需注意图片是require引入的,还有图片一定要设置宽高。

三、网络加载的图片,需要知道图片的链接地址,且加载方式不同,需要uri方式引入,也需要设置宽高

let pic = {
uri:'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
};
return (
<View style={styles.container}>
<View style={{flex:1,flexDirection:'row',justifyContent:'center'}}>
<View style={{width:50,height:50,backgroundColor:'powderblue'}}>

</View>
<View style={{width:50,height:50,backgroundColor:'skyblue'}}>

</View>
<View style={{width:50,height:50,backgroundColor:'steelblue'}}>

</View>
</View>
<Image source={pic} style={styles.pic}/>
<Image source={pic} style={styles.pic}/>
<Greeting name='菲菲' />
<Blink text='state状态测试'/>
<Text style={[styles.red,styles.fontSizeText,styles.textBg]}>样式调整,颜色,字体等等</Text>
<Text style={[styles.flexLayout,styles.flexLayoutBg]}>
撑满空间
</Text>
<Text style={[styles.flexLayout,styles.flexLayoutBg]}>
撑满空间2
</Text>
<PizzaTranslator></PizzaTranslator>
{/* <TouchableOpacity style={{width:200,height: 50, backgroundColor: 'red', borderRadius:5,justifyContent: 'center', alignItems: 'center'}}
onPress={() => navigate('DetailPage', { title: '详情页',des:'回到上一页' })} >
<Text style={{color:"#FFF"}}>点击查看详情</Text>
</TouchableOpacity> */}
</View>
);


或者

<Image source={{uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'}} style={styles.img1} />

两种写法都可以


发布了5 篇原创文章 · 获赞 1 · 访问量 1万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览