设为首页收藏本站

react native【免费】VIP视频教程 rn开发者交流论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1937|回复: 191

[视频教程] 19、手把手教React Native实战之图片Image组件

  [复制链接]

401

主题

762

帖子

6889

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
6889
发表于 2016-6-16 15:25:13 | 显示全部楼层 |阅读模式
#19、手把手教React Native实战之图片Image组件

React Native的Image组件调用的图片途径比较多:网络图片、本地图片、照相机图片


加作者微信公众号(dongfangyao888)或扫描下面二维码
推送高清视频教程+语音解说+课堂笔记和源码


#Image组件的属性:

resizeMode:图片适用的模式 cover、contain、stretch

source:图片的引用地址

网络图片:source={{uri:'http://.png'}}

本地图片:source={require('./baidulogo.png')}

静态图片资源:注意:如果你添加图片的时候packager正在运行,则你需要重启packager以便能正确引入新添加的图片。

这样会带来如下的一些好处:

iOS和Android一致的文件系统。
图片和JS代码处在相同的文件夹,这样组件就可以包含自己所用的图片而不用单独去设置。
不需要全局命名。你不用再担心图片名字的冲突问题了。
只有实际被用到(即被require)的图片才会被打包到你的app。
现在在开发期间,增加和修改图片不需要重新编译了,只要和修改js代码一样刷新你的模拟器就可以了。
与访问网络图片相比,Packager可以得知图片大小了,不需要在代码里再声明一遍尺寸。
现在通过npm来分发组件或库可以包含图片了。

注意:为了使新的图片资源机制正常工作,require中的图片名字必须是一个静态字符串。

#使用混合App的图片资源

如果你在编写一个混合App(一部分UI使用React Native,而另一部分使用平台原生代码),也可以使用已经打包到App中的图片资源(通过Xcode的asset类目或者Android的drawable文件夹打包)

<Image source={{uri: 'app_icon'}} style={{width: 40, height: 40}} />

注意:这一做法并没有任何安全检查。你需要自己确保图片在应用中确实存在,而且还需要指定尺寸

注意:网络图片,你需要手动指定图片的尺寸

关于图片的尺寸,React Native会自动为你选好。如果没有,则会选择最接近的尺寸进行缩放,但也至少缩放到比所需尺寸大出50%,以使图片看起来仍然足够清晰。这一切过程都是自动完成的,所以你不用操心自己去完成这些繁琐且易错的代码。



##19、配套视频(下载地址)
【回复本帖才可见】
游客,如果您要查看本帖隐藏内容请回复



react native vip论坛免费发布【手把手教react native实战开发】视频教程,立志于打造全互联网最全面最详细最易懂的React Native
开发视频教程,Facebook已经在多项产品中使用了React Native,并且将持续地投入建设,让我们引领react native开发的潮流!
回复

使用道具 举报

0

主题

4

帖子

12

积分

新手上路

Rank: 1

积分
12
发表于 2016-6-18 15:19:54 | 显示全部楼层
支持东方老师~支持东方老师~
回复 支持 反对

使用道具 举报

1

主题

84

帖子

203

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
203
发表于 2016-6-23 21:29:08 | 显示全部楼层
怎么没有18呢
回复 支持 反对

使用道具 举报

1

主题

127

帖子

353

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
353
发表于 2016-7-2 17:21:30 | 显示全部楼层
asdfasdfasd
回复 支持 反对

使用道具 举报

0

主题

162

帖子

400

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
400
发表于 2016-7-4 17:28:26 | 显示全部楼层
持续学习中
回复 支持 反对

使用道具 举报

0

主题

55

帖子

144

积分

注册会员

Rank: 2

积分
144
发表于 2016-7-6 11:14:40 | 显示全部楼层
学习学习
回复

使用道具 举报

0

主题

73

帖子

152

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
152
发表于 2016-7-6 12:47:12 | 显示全部楼层
持续学习中~~~~
回复 支持 反对

使用道具 举报

0

主题

35

帖子

76

积分

注册会员

Rank: 2

积分
76
发表于 2016-7-7 10:02:50 | 显示全部楼层
学习学习
回复

使用道具 举报

0

主题

62

帖子

136

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
136
发表于 2016-7-10 12:49:15 | 显示全部楼层
学习学习
回复

使用道具 举报

0

主题

53

帖子

108

积分

注册会员

Rank: 2

积分
108
发表于 2016-7-12 14:34:52 | 显示全部楼层
6a086a086a08
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|ReactNative Inc.    

GMT+8, 2018-7-16 10:57 , Processed in 0.164621 second(s), 30 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表