react-native json 上传本地图片及网络图片方法

react-native 来源于Facebook 集成的框架,常用的上传方式有两种,一种是比较简单粗暴的{{uri:http://…..}}加载方式,另一种就是使用json来上传本地或者是获取服务器上的图片的方法.

开发软件webstorm

首先你得配置一个图片的json,打开webstorm > ios > 右键 >reveal in finder 把img图片拷贝进去.

打开 index.ios.js

/**
* Sample React Native App
* https://github.com/facebook/react-native * @flow
*/

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image
} from 'react-native';
//导入json数据
var BadgeData = require('./BadgeData.json');
//导入Dimensions
var Dimensions = require('Dimensions');
var {width} = Dimensions.get("window");
//定义全局变量
var clos =3;
var boxw=100;
var vmargin=(width - clos*boxw)/(clos + 1);
var hmargin=25;
export default class testimage extends Component {
render() {
return (
<View style={styles.container}>
{/*返回数组内容并展示*/}
{this.renderAllBadge()}
</View>
);
}
//返回所有数组
renderAllBadge(){
//定义所有组件的子组件
var allBadge = [];
//遍历json数据
for (var i=0; i<BadgeData.data.length; i++){
//抓取单个数组
var badge = BadgeData.data[i];
allBadge.push(
<View key={i} style={styles.pageview}>
<Image source={{uri:badge.icon}} style={styles.Imageview} />
<Text style={styles.textview}>
{badge.title}
</Text>
</View>

)
}
//返回
return allBadge;
}

}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
flexDirection:"row",
flexWrap:'wrap',
},
pageview:{
backgroundColor:'gray',
alignItems:'center',
width:boxw,
height:boxw,
marginLeft:vmargin,
marginTop:hmargin,
},
Imageview:{
width:80,
height:80,
},
textview:{},
});

AppRegistry.registerComponent('testimage', () => testimage);

ps:一定要等webstorm 工程文件转成JSX,打开的时候会提示 swicth,一定要点击,这点很重要