---------------------------------------------------------------------------------------------------
React.native是facebook开源的一套基于JavaScript的开源框架,
非常方便用来开发移动设备的app。
并且,方便及时更新app的UI与数据。也非常方便部署。
goodmao希望帮助大家迅速上手掌握!
----------------------------------------------------------------------------------------------------

參考:
源代码參考:Layout.h/.c文件
----------------------------------------------------------------------------------------------------

我们这一节,简介关于图像Image的使用。
目的是让大家在分分钟内理解并学会使用方法。


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


二、用法

(1)本地静态图使用
    1.加入图片到项目中
       加入图片到项目中后。生成的app中直接包括了静态图片资源,能够直接使用。

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



    2.载入并显示
      a.定义样式
var styles = StyleSheet.create({
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 = React.createClass({

  //设置视图Image
render: function() {
return (
<View style = {styles.container}>
<Image
style = {styles.size}
source = {require('image!1')} //1.Images.xcassets图片
/> <Image
style = {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 = React.createClass({ //创建组件类

  //组件的渲染方法
//设置视图Image
render: function() {
return (
<View style = {styles.container}>
<Image
source = {{uri: 'http://172.16.105.149:8081/server-image/goodmao.jpg'}} //3.网络图
style = {styles.size}
/>
</View>
);
}
});

三、执行效果图:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbWFveWluZ3lvbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">



说明:图片来自“小偶App”,好玩吧?!
           喜欢自拍的朋友。不要错过,哈哈!


【Facebook的UI开发框架React入门之八】Image的使用简单介绍(iOS平台)-goodmao的更多相关文章

  1. 【Facebook的UI开发框架React入门之九】button简单介绍(iOS平台)-goodmao

    --------------------------------------------------------------------------------------------------- ...

  2. 文顶顶 iOS开发UI篇—UITabBarController简单介绍 iOS开发UI篇—UITabBarController简单介绍

    一.简单介绍 UITabBarController和UINavigationController类似,UITabBarController也可以轻松地管理多个控制器,轻松完成控制器之间的切换,典型的例 ...

  3. 《R语言入门》语言及环境简单介绍

    简单介绍 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/diss ...

  4. apicloud入门学习笔记1:简单介绍

    官网地址:https://www.apicloud.com/ 新手开发指南:https://docs.apicloud.com/APICloud/junior-develop-guide 开发语言:H ...

  5. 基于React 的前端UI开发框架 及与Electron 的结合 https://cxjs.io/

    1.cxjs  基于React 的前端UI开发框架    https://cxjs.io/ coreu   http://coreui.io/ 2.antd-admin                ...

  6. React 入门实例教程

    现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...

  7. React入门 (1)—使用指南(包括ES5和ES6对比)

    前言 本篇会简明扼要的介绍一下React的使用方法.代码会用JSX+ES5和JSX+ES6两种方式实现. React简介 React来自Facebook,于2013年开源.至今不断修改完善,现在已经到 ...

  8. 2015年最热门前端框架React 入门实例教程

    现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...

  9. react 入门教程 阮一峰老师真的是榜样

    -  转自阮一峰老师博客 React 入门实例教程   作者: 阮一峰 日期: 2015年3月31日 现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Nati ...

随机推荐

  1. Visual Studio中Radio Button组绑定变量方法(DDX_Radio方法)

    需求描述:Visual Studio 创建的界面程序中又许多 Radio Button,希望这些所有的Radio Button统一绑定到一个变量上,这个变量一旦改变,Radio Button的选中状态 ...

  2. 通俗理解 模糊自适应PID

    模糊自适应PID算法就是在经典的PID的基础上添加模糊控制规则库,建立这个库的目的就是算法能够自己来进行改变P.I.D的值. 就拿温度的上升过程控制来说,刚开始的时候,希望温度能够快速的升到终点温度, ...

  3. 暑假集训 || LCA && RMQ

    LCA定义为对于一颗树 树上两个点的最近公共祖先 一.Tarjan求LCA(离线方法 https://blog.csdn.net/lw277232240/article/details/7701751 ...

  4. ssh 带密码私钥 输入密码

    $ssh-agent bash $ssh-add -k ~/.ssh/id_rsa Enter passphrase for /home/ubuntu/.ssh/id_rsa: Identity ad ...

  5. linux下vi修改文件用法

    进入vi的命令 vi filename :打开或新建文件,并将光标置于第一行首 vi +n filename :打开文件,并将光标置于第n行首 vi + filename :打开文件,并将光标置于最后 ...

  6. pc端移动端兼容的大图轮播

    body, html { width: 100%; } * { margin:; padding:; list-style: none; } .haha { list-style-type: none ...

  7. <Spring Cloud>入门二 Eureka Client

    1.搭建一个通用工程 1.1 pom 文件 <?xml version="1.0" encoding="UTF-8"?> <project x ...

  8. MVC Remote属性验证

    模型验证方式一: 1.需要添加引用: using System.Web.Mvc; 2.在模型属性上添加验证: [Remote("CheckIsHaveSerialNo", &quo ...

  9. 【02】koala编译中文出错(已放弃不用)

    http://koala-app.com/index-zh.html koala 下载地址.     sass.中文编译出错: 打开 Koala文件夹位置->rubygems->gems- ...

  10. laravel 文件删除

    删除文件 <?php class demo{ public function del(){ $disk = Storage::disk('public');//获取磁盘实例 $disk-> ...