【Facebook的UI开发框架React入门之八】Image的使用简单介绍(iOS平台）

【Facebook的UI开发框架React入门之八】Image的使用简单介绍(iOS平台）

--------------------------------------------------------------------------------------------------- 是facebook开源的一套基于JavaScript的开源框架， 非常方便用来开发移动设备的app。 并且，方便及时更新app的UI与数据。也非常方便部署。 goodmao希望帮助大家迅速上手掌握！ ----------------------------------------------------------------------------------------------------
參考： 样式Style： .html#style 视图View： .html#content 图像Image： .html#content 颜參考：.asp 源代码參考： Layout.h/.c文件 ----------------------------------------------------------------------------------------------------
我们这一节，简介关于图像Image的使用。 目的是让大家在分分钟内理解并学会使用方法。

一、Image简单介绍： React能够载入并显示多种来源的图片，包含： 1.本地静态资源图，本地暂时图； 2.网络图。 .本地磁盘图（比如相冊或相机）。

二、用法
（1）本地静态图使用 1.加入图片到项目中 加入图片到项目中后。生成的app中直接包括了静态图片资源，能够直接使用。

有两种方式加入图片到项目中，如图： a.直接在xcode中加入目录和图片 b.在Images.xcassets中加入图片


2.载入并显示 a.定义样式

var styles = ({container: {//flex: 1,flexDirection: 	row	,position: 	absolute	,top:   100,left:  10,justifyContent: 	center	,alignItems: 	center	,backgroundColor: 	#F5FCFF	,},size: {width:  100,height: 150,},
});

注意：须要设置flex属性为0或者使用默认值。否则flex:1，则图片会被拉伸。


b.创建类载入并显示图片 说明：导入本地静态资源图的方法为 require( image!1 )， 当中，參数 image 表示载入图片文件，參数 1 是图片文件名称， 两者中间用感叹号 ! 分隔。 注意：我尝试了用这两种方式载入jpg图片，竟然没显示，还没查明原因。

假设哪位搞定，麻烦告知和给各位朋友分享。

var HelloReact = ({//设置视图Imagerender: function() {return (<View style = {}><Imagestyle = {styles.size}source = {require(	image!1	)} //1.Images.xcassets图片/><Imagestyle = {styles.size}source = {require(	image!2	)} //2.Xcode中直接加入Images路径和图片/></View>);}
});

（2）载入并显示server的图片 1.加入图片到server 在我们測试项目 HelloReact的目录中。与index.ios.js同一级目录， 创建目录存：server-image。存放以下js中须要载入的图片文件。


2.载入并显示图片 a.样式定义同上
b.创建类并载入和显示网络图 说明：直接用属性uri: 就可以载入网络图片，且支持常见图片格式（png，jpg等）。

var HelloReact = ({ //创建组件类//组件的渲染方法//设置视图Imagerender: function() {return (<View style = {}><Imagesource = {{uri: 	http://172.16.105.149:8081/server-image/goodmao.jpg	}} //.网络图style = {styles.size}/></View>);}
});

三、执行效果图：


说明：图片来自“小偶App”，好玩吧？！ 喜欢自拍的朋友。不要错过，哈哈！