react native学习篇之图片学习

一、本地图片加载

完成一个图片列表的加载

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

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

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

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

react native学习篇之图片学习

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

react native学习篇之图片学习 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:{
 
 }

});

在模拟器中显示如下（还未加样式，有点不好看）

react native学习篇之图片学习

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

二、本地图片加载

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

react native学习篇之图片学习

如上图：相当于在本地根目录下找到该图片。需注意图片是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} />

两种写法都可以

react native学习篇之图片学习

相关推荐