Image 组件

阅读数:973 发布时间:2016-07-08 23:02:54

作者:秀野堂主 标签:

Static Image Resources--静态图片资源

从0.14 版本开始,React Native 就提供了一种统一方式来管理 iOS 和 Android 应用的图片。

你可以将静态图片资源添加到你的代码目录的某个地方,然后通过下面这种方式引用:

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

图片文件会被以 JS 模块查找的方式来查找。在上面这个列子中,Packager就会去这个组件所在的文件夹下查找my-icon.png。并且,如果你有my-icon.ios.png和my-icon.android.png,Packager就会根据平台而选择不同的文件。

关于 React Native 中的 Packager,官方的说法是:

React Native Packager is a project similar in scope to browserify or webpack, it provides a CommonJS-like module system, JavaScript compilation (ES6, Flow, JSX), bundling, and asset loading.

The main difference is the Packager's focus on compilation and bundling speed. We aim for a sub-second edit-reload cycles. Additionally, we don't want users -- with large code bases -- to wait more than a few seconds after starting the packager.

混合App(Hybrid App)的图片资源使用

首先理解下什么是混合App,这里的不是 iOS 和 Android 代码复用,而是 React Native 和原生代码的混合。

官网上的说法是:

a hybrid app (some UIs in React Native, some UIs in platform code)

也就是说,在这个 App 中部分 UI 使用 React Native,而另一部分使用各原生原生的代码。

编写一个混合App,可以使用已经打包(通过 Xcode 的 asset 类目或者 Android 的 drawable 文件夹打包)到 App 中的图片资源。使用方式如下:

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

需要注意的是,这种方式没有做安全检查,你需要自己确保图片在应用中是确实存在的,同时,需要指定图片的宽高

网络图片

有一些需要在 APP 中展示的图片在编译时期还不能获取,或者你想要通过动态加载图片的方式来减少二进制文件的大小。
这里与静态图片有一点区别,你需要手动指定这些图片的尺寸。(关于什么时候需要指定图片尺寸,在下面有讨论)

// 正确
<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
       style={{width: 400, height: 400}} />

本地文件系统中的图片

这个暂时不做讨论

为何不全部自动指定图片尺寸

官网上说的很多,我总结一下就是:

为了避免像浏览器中,如果不指定图片尺寸,UI 在图片加载过程中会跳动的问题。

在 React Native 中,从应用包中通过require('./my-icon.png')语法加载的静态图片则无需指定尺寸,因为它们的尺寸在加载时就可以立刻知道。
因为,通过require('./my-icon.png')加载时,实际上输出的结果可能是:

{"__packager_asset":true,"path":"/Users/react/HelloWorld/my-icon.png","uri":"my-icon.png","width":591,"height":573}

也就是说,直接输出了图片的实际尺寸,绝对路径等信息。

资源属性是作为一个对象存在

在 React Native 中,原本图片标签中的 src 属性 变成了 source ,并且 source 不是作为一个字符串而是作为一个包含 uri 属性的对象而存在。

为什么 React Native 这么处理呢?
因为 React Native 一直在持续的开发,为了方便以后扩展,比如,将来可能通过 {uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}} 的方式来支持"雪碧图"。

从用户角度来说,通过这样的数据结构可以获取到更多有关该图片的信息。

通过嵌套实现背景图

可以通过在 Image 组件中嵌套子组件的方式来实现背景图,示例如下:

return (
  <Image source={...}>
    <Text>Inside</Text>
  </Image>
);

相关文章推荐: