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

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

• 网络图片和base64 图片
• 本地图片

 

网络图片和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>
	    )
	}