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

---------------------------------------------------------------------------------------------------

React.native是facebook开源的一套基于JavaScript的开源框架，

非常方便用来开发移动设备的app。

并且，方便及时更新app的UI与数据。也非常方便部署。

goodmao希望帮助大家迅速上手掌握！

----------------------------------------------------------------------------------------------------

參考：

样式Style： http://facebook.github.io/react-native/docs/view.html#style

视图View： http://facebook.github.io/react-native/docs/style.html#content

图像Image： https://facebook.github.io/react-native/docs/image.html#content

颜色參考：http://www.w3school.com.cn/html/html_colors.asp

源代码參考： 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({//设置视图Imagerender: function() {return (<View style = {styles.container}><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 = React.createClass({ //创建组件类//组件的渲染方法//设置视图Imagerender: function() {return (<View style = {styles.container}><Imagesource = {{uri: 'http://172.16.105.149:8081/server-image/goodmao.jpg'}} //3.网络图style = {styles.size}/></View>);}
});

三、执行效果图：

说明：图片来自“小偶App”，好玩吧？！

喜欢自拍的朋友。不要错过，哈哈！

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

React学习-event.preventDefault()方法的简单介绍
React学习-event.preventDefault()方法的简单介绍 react官方文档中有这么一段: 在 React 中另一个不同点是你不能通过返回 false 的方式阻止默认行为.你必须显式 ...
React学习（一）：简单介绍入门
序言:React官网介绍很多内容,但仍想总结一下加深了解. 目录一.React介绍二.React特点三.引入React 库四.第一个react项目一.React介绍 React 起源于 Fa ...
（入门）前端开发的简单介绍
前端的开发首先离不开前端基础技术(html.css和js),其次想要有更好的发展应用就要用到前端框架. 那么有以下六个问题需要简答地了解一下. 一.前端.后端各自的工作是什么? 简地是说前端就是设计用 ...
文顶顶 iOS开发UI篇—UITabBarController简单介绍 iOS开发UI篇—UITabBarController简单介绍...
一.简单介绍 UITabBarController和UINavigationController类似,UITabBarController也可以轻松地管理多个控制器,轻松完成控制器之间的切换,典型的例 ...
apicloud入门学习笔记1：简单介绍
官网地址:https://www.apicloud.com/ 新手开发指南:https://docs.apicloud.com/APICloud/junior-develop-guide 开发语言:H ...
elasticsearch从入门到入门系列（一）---简单介绍及安装
1.什么是搜索引擎全⽂文搜索引擎是⽬目前⼴广泛应⽤用的主流搜索引擎.它的⼯工作原理理是计算机索引程序通过扫描⽂文章中的每⼀一个词,对每⼀一个词建⽴立⼀一个索引,指明该词在⽂文章中出现的次数和位置,当 ...
Kylin快速入门系列(1) | Kylin的简单介绍及安装部署
大家好,我是不温卜火,是一名计算机学院大数据专业大二的学生,昵称来源于成语-不温不火,本意是希望自己性情温和.作为一名互联网行业的小白,博主写博客一方面是为了记录自己的学习过程,另一方面是总结自己 ...
React入门（一）之基本语法（内容较多）
React入门(一) 一.介绍React 1.1.简介 1.2.特点 1.3.与其他框架对比二.搭建环境 2.1.通过引入文件的方式 2.2.通过官方脚手架的方式 2.3.第三方脚手架三.JSX ...
Carson带你学Android：手把手带你入门跨平台UI开发框架Flutter
前言 Flutter 作为Google出品的一个新兴的跨平台移动客户端UI开发框架,正在被越来越多的开发者和组织使用,包括阿里的咸鱼.腾讯的微信等. 今天,我将献上一份 <全面 & 详细 ...

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

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

最新文章

热门文章