静态图片资源

React Native 提供了一个统一的方式来管理 iOS 和 Android 应用中的图片。要往 App 中添加一个静态图片,

只需把图片文件放在代码文件夹中某处,然后像下面这样去引用它:

<Image source={require('./my-icon.png')} />

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

(不能使用变量!因为 require 是在编译时期执行,而非运行时期执行!)。

// 错误
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />; // 正确
var icon = this.props.active
? require('./my-icon-active.png')
: require('./my-icon-inactive.png');
<Image source={icon} />;

请注意:通过这种方式引用的图片资源包含图片的尺寸(宽度,高度)信息,如果你需要动态缩放图片(例如,通过 flex),

你可能必须手动在 style 属性设置{ width: null, height: null }。

静态的非图片资源

上面描述的require语法也可以用来静态地加载你项目中的声音、视频或者文档文件。大多数常见文件类型都支持,

包括.mp3, .wav, .mp4, .mov, .htm 和 .pdf等(完整列表请看 packager defaults)。

你也可以创建自己的配置文件来支持其他类型的文件。具体的配置可以参考packager config file。

需要注意的是视频必须指定尺寸而不能使用flex样式,因为我们目前还不能从非图片资源中获取到尺寸信息。

对于直接链接到 Xcode 或者 Android 资源文件夹的视频,则不会有这个限制。

使用混合 App 的图片资源

如果你在编写一个混合 App(一部分 UI 使用 React Native,而另一部分使用平台原生代码),也可以使用已经打包到 App 中的图片资源(以拖拽的方式放置在 Xcode 的 asset 类目中,或是放置在 Android 的 drawable 目录里)。注意此时只使用文件名,不带路径也不带后缀:

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

对于放置在 Android 的 assets 目录中的图片,还可以使用asset:/ 前缀来引用:

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

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

网络图片

很多要在 App 中显示的图片并不能在编译的时候获得,又或者有时候需要动态载入来减少打包后的二进制文件的大小。

这些时候,与静态资源不同的是,你需要手动指定图片的尺寸。同时我们强烈建议你使用 https 以满足 iOS App Transport Security

的要求。

// 正确
<Image source={{uri: 'https://facebook.github.io/react/logo-og.png'}}
style={{width: 400, height: 400}} /> // 错误
<Image source={{uri: 'https://facebook.github.io/react/logo-og.png'}} />

网络图片的请求参数

你可以在 Image 组件的 source 属性中指定一些请求参数,如下面的示例:

<Image
source={{
uri: 'https://facebook.github.io/react/logo-og.png',
method: 'POST',
headers: {
Pragma: 'no-cache',
},
body: 'Your Body goes here',
}}
style={{width: 400, height: 400}}
/>

Uri 数据图片

有时候你可能拿到的是图片的 base64 数据,此时可以使用'data:'格式来显示图片。请注意,你需要手动指定图片的尺寸。

建议仅对非常小的图片使用 base64 数据,比如一些小图标。

// 请记得指定宽高!
<Image
style={{
width: 51,
height: 51,
resizeMode: 'contain',
}}
source={{
uri:
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==',
}}
/>

缓存控制(仅 iOS)

在某些情况下你可能仅仅想展示一张已经在本地缓存的图片,例如一个低分辨率的占位符,直到高分辨率的图片可用。又或者你无所谓图片是否过时,而且也不在乎显示过时的图片,节省带宽相对更重要。缓存资源属性提供给了你控制网络层与缓存交互的方式。

default: 使用原生平台默认策略。

reload: URL 的数据将从原始地址加载。不使用现有的缓存数据。

force-cache: 现有的缓存数据将用于满足请求,忽略其期限或到期日。如果缓存中没有对应请求的数据,则从原始地址加载。

only-if-cached: 现有的缓存数据将用于满足请求,忽略其期限或到期日。如果缓存中没有对应请求的数据,则不尝试从原始地址加载,并且认为请求是失败的。

<Image
source={{
uri: 'https://facebook.github.io/react/logo-og.png',
cache: 'only-if-cached',
}}
style={{width: 400, height: 400}}
/>

为什么不在所有情况下都自动指定尺寸呢?

在浏览器中,如果你不给图片指定尺寸,那么浏览器会首先渲染一个 0x0 大小的元素占位,然后下载图片,在下载完成后再基于正确的尺寸来渲染图片。这样做的最大问题是 UI 会在图片加载的过程中上下跳动,使得用户体验非常糟糕。

在React Native中我们有意避免了这一行为。如此一来开发者就需要做更多工作来提前知晓远程图片的尺寸(或宽高比),但我们相信这样可以带来更好的用户体验。然而,读取本地静态图片(使用require('./my-icon.png')语法)则无需指定尺寸,因为它们的尺寸在加载时就可以立刻知道。

比如这样一个引用require('./my-icon.png')的实际输出结果可能是:

{"__packager_asset":true,"uri":"my-icon.png","width":591,"height":573}

资源属性是一个对象(object)

在 React Native 中,另一个值得一提的变动是我们把src属性改为了source属性,而且并不接受字符串,正确的值是一个带有uri属性的对象。

<Image source={{uri: 'something.jpg'}} />

深层次的考虑是,这样可以使我们在对象中添加一些元数据(metadata)。假设你在使用require('./my-icon.png'),那么我们就会在其中添加真实文件路径以及尺寸等信息(这只是举个例子,未来的版本中 require 的具体行为可能会变化)。此外这也是考虑了未来的扩展性,比如我们可能会加入精灵图(sprites)的支持:在输出{uri: ...}的基础上,我们可以进一步输出裁切信息{uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}},这样理论上就可以在现有的代码中无缝支持精灵图的切分。

对于开发者来说,则可以在其中标注一些有用的属性,例如图片的尺寸,这样可以使图片自己去计算将要显示的尺寸(而不必在样式中写死)。请在这一数据结构中自由发挥,存储你可能需要的任何图片相关的信息。

背景图片与嵌套写法

开发者们常面对的一种需求就是类似 web 中的背景图(background-image)。要实现这一用例,只需使用组件(其 props 与完全相同),然后把需要背景图的子组件嵌入其中即可。

也可能你并不需要使用,因为它的实现其实非常简单,实质就是对图片使用了绝对定位。你可以阅读其文档然后思考你是否有更好更简单的布局方案。

return (
<ImageBackground source={...} style={{width: '100%', height: '100%'}}>
<Text>Inside</Text>
</ImageBackground>
);

注意你必须指定宽高样式。

iOS 边框圆角的注意事项

请注意下列边框圆角样式目前在 iOS 的图片组件上还不支持:

borderTopLeftRadius
borderTopRightRadius
borderBottomLeftRadius
borderBottomRightRadius

在主线程外解码图片

图片解码有可能会需要超过一帧的时间。在 web 上这是页面掉帧的一大因素,因为解码是在主线程中完成的。然而在 React Native 中,

图片解码则是在另一线程中完成的。在实际开发中,一般对图片还没下载完成时的场景都做了处理(添加 loading 等),

而图片解码时显示的占位符只占用几帧时间,并不需要你改动代码去额外处理。

相关相册的那个demo明日解决

react-native中的图片的更多相关文章

  1. [转] 在React Native中使用ART

    http://bbs.reactnative.cn/topic/306/%E5%9C%A8react-native%E4%B8%AD%E4%BD%BF%E7%94%A8art 前半个月捣腾了一下Rea ...

  2. react native中一次错误排查 Error:Error: Duplicate resources

    最近一直在使用react native中,遇到了很多的坑,同时也学习到了一些移动端的开发经验. 今天在做一个打包的测试时,遇到了一个问题,打包过程中报错“Error:Error: Duplicate ...

  3. react native中如何往服务器上传网络图片

    let common_url = 'http://192.168.1.1:8080/'; //服务器地址 let token = ''; //用户登陆后返回的token /** * 使用fetch实现 ...

  4. 在 React Native 中使用 Redux 架构

    前言 Redux 架构是 Flux 架构的一个变形,相对于 Flux,Redux 的复杂性相对较低,而且最为巧妙的是 React 应用可以看成由一个根组件连接着许多大大小小的组件的应用,Redux 也 ...

  5. React Native 中 CSS 的使用

    首先声明,此文原作者为黎 跃春 React Native中CSS 内联样式 对象样式 使用Stylesheet.Create 样式拼接 导出样式对象 下面的代码是index.ios.js中的代码: / ...

  6. react native中的欢迎页(解决首加载白屏)

    参照网页: http://blog.csdn.net/fengyuzhengfan/article/details/52712829 首先是在原生中写一些方法,然后通过react native中js去 ...

  7. React Native中的网络请求fetch和简单封装

    React Native中的网络请求fetch使用方法最为简单,但却可以实现大多数的网络请求,需要了解更多的可以访问: https://segmentfault.com/a/1190000003810 ...

  8. [转] 「指尖上的魔法」 - 谈谈 React Native 中的手势

    http://gold.xitu.io/entry/55fa202960b28497519db23f React-Native是一款由Facebook开发并开源的框架,主要卖点是使用JavaScrip ...

  9. react native中使用echarts

    开发平台:mac pro node版本:v8.11.2 npm版本:6.4.1 react-native版本:0.57.8 native-echarts版本:^0.5.0 目标平台:android端收 ...

  10. 在React Native中,使用fetch网络请求 实现get 和 post

    //在React Native中,使用fetch实现网络请求 /* fetch 是一个封装程度更高的网络API, 使用了Promise * Promise 是异步编程的一种解决方案 * Promise ...

随机推荐

  1. Django--权限信息操作

    一 . 权限控制 表结构的设计 rbca(Role Based Access Control)  基于角色的权限控制 3个model  5张表 class User(models.Model): # ...

  2. php配置-解决大数据超多字段的POST方式提交无法完全接受的问题

    例如:在盘点表的数据提交中出现了POST大量数据超多字段的将近2000个字段,部分字段没有接受:修改方法为修改php.ini 将max_input_var调大,该值默认为1000 max_input_ ...

  3. vue自定义组件及传值

    1.使用 Vue.component() 方法注册组件 2.使用 props 属性传递参数 v-for="item in items": 遍历 Vue 实例中定义的名为 items ...

  4. 【README.md】Markdown语言常用语法

    转自:http://blog.csdn.net/zhaokaiqiang1992 这里只介绍最常用和最常见的功能,若想查看全部的语法,请移步http://wowubuntu.com/markdown/ ...

  5. PCIE

    ---恢复内容开始--- 高速差分总线.串行总线 每一条PCIe链路中只能连接两个设备这两个设备互为是数据发送端和数据接收端.PCIe链路可以由多条Lane组成,目前PCIe链路×1.×2.×4.×8 ...

  6. hdu-6165(tarjan+topusort)

    题意:一个有向图,无自环,无重边,让你判断这个图内的任意两点是否有路: 解题思路:首先,判断两个点是否可达一般用出入度来判断,如果在拓扑排序中同时有两个及以上入度同时为零的点,那么,这些入度的为零的点 ...

  7. 【C/C++】实现牛顿迭代

    #include<bits/stdc++.h> using namespace std; /*(x+2)^2 +1 -2(x-1)^2+7 */ double f(double x){ - ...

  8. Civil 3D 二次开发 创建Civil 3D 对象—— 01 —— 创建几何空间点

    这一小节,我们创建派生于CivilCreateEntityDemo的类CivilCreateCogoPoint,来创建几何空间点. 1 创建类并添加字段及方法 首先在项目资源管理器中向本项目中添加类, ...

  9. Dijkstra—校园景点游览问题

    #include<iostream> #include<cstdio> #include<cstring> #define MAX 9999999 using na ...

  10. HDU3480-Division-斜率dp

    首先想到的就是sort一下,然后每个集合都在排过序的数组里面取,不重复. 这样就推出公式dp[i][j] = min(dp[k][j-1] + (s[i]-s[k+1])^2) 其中dp[i][j]为 ...