react native开发Android 篇——Image动态加载图片

react native开发Android 篇——Image动态加载图片

 

网络图片和base64 图片

import React, { Component } from 'react';
export default class DaysScreen extends React.Component {
	render() {
	    let urlHttp='https://facebook.github.io/react-native/docs/assets/favicon.png';
	    let url64='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==';
	    return (
	    	<View>
		    	<Image
				  style={{width: 50, height: 50}}
				  source={{uri: urlHttp}}
				/>
				<Image
				  style={{width: 66, height: 58}}
				  source={{uri:url64 }}
				/>
	    	</View>
	    )
	}

请注意对于网络和 base64 数据的图片需要手动指定尺寸!

本地图片

第一种相对路径,这个必须保证图片路径正确

import React, { Component } from 'react';
export default class DaysScreen extends React.Component {
	render() {
	    let arr=[require("../images/bg/bg1.jpg"),require("../images/bg/bg2.jpg")];
	    return (
	    	<View>
		    	{
			        arr.map((item,index)=>{
			          return <Image
			                      key={index}
			                      style={{ width: 60, height: 65, borderRadius: 12,}}
			                      source={item}
			                  />
			        })
			     }
	    	</View>
	    )
	}

  • 第二种先加载图片再导出
    新建imageLoad.js文件,代码如下
export default {
    img1:require('./images/bg/bg1.jpg'),
    img2:require('./images/bg/bg2.jpg'),
    img3:require('./images/bg/bg3.jpg'),
    img4:require('./images/bg/bg4.jpg'),
    img5:require('./images/bg/bg5.jpg'),
    img6:require('./images/bg/bg6.jpg'),
    img7:require('./images/bg/bg7.jpg'),
    img8:require('./images/bg/bg8.jpg'),
    img9:require('./images/bg/bg9.jpg'),
    img10:require('./images/bg/bg10.jpg'),
}
import React, { Component } from 'react';
import imgarr from 'imageLoad.js';//注意路径要写正确
export default class DaysScreen extends React.Component {
	render() {
	let arr=[1,2,3,4,5,6,7,8,9,10];
	    return (
	    	<View>
		    	{
			        arr.map((item,index)=>{
			          return <Image
			                      key={index}
			                      style={{ width: 60, height: 65, borderRadius: 12,}}
			                      source={imgarr ['img'+(index+1)]}
			                  />
			        })
			     }
	    	</View>
	    )
	}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值