静态图片资源
React Native项目中,图片文件的查找会和 JS 模块的查找方式一样。它提供了一个统一的方式来管理 iOS 和 Android 应用中的图片。要往 App 中添加一个静态图片,只需把图片文件放在代码文件夹中某处,然后像下面这样去引用它:
//资源属性是一个对象(object),而且并不接受字符串,正确的值是一个带有uri属性的对象。
//这样可以使我们在对象中添加一些元数据(metadata)。
<Image source={require('./my-icon.png')} />
如果你有my-icon.ios.png和my-icon.android.png,Packager 就会根据平台而选择不同的文件。
可以使用@2x,@3x这样的文件名后缀,来为不同的屏幕精度提供图片。比如下面这样的代码结构:
├── button.js
└── img├── check.png├── check@2x.png└── check@3x.png
并且button.js里有这样的代码:
<Image source={require('./img/check.png')} />
Packager 会打包所有的图片并且依据屏幕精度提供对应的资源。譬如说,iPhone 7 会使用check@2x.png,而 iPhone 7 plus 或是 Nexus 5 上则会使用check@3x.png。如果没有图片恰好满足屏幕分辨率,则会自动选中最接近的一个图片。
这样使用的好处:
- iOS 和 Android 一致的文件系统。
- 图片和 JS 代码处在相同的文件夹,这样组件就可以包含自己所用的图片而不用单独去设置。
- 不需要全局命名。你不用再担心图片名字的冲突问题了。
- 只有实际被用到(即被 require)的图片才会被打包到你的 app。
- 现在在开发期间,增加和修改图片不需要重新编译了,只要和修改 js 代码一样刷新你的模拟器就可以了。
- 与访问网络图片相比,Packager 可以得知图片大小了,不需要在代码里再声明一遍尺寸。
- 现在通过 npm 来分发组件或库可以包含图片了。
为了使新的图片资源机制正常工作,require 中的图片名字必须是一个静态字符串(不能使用变量!因为 require 是在编译时期执行,而非运行时期执行!
// 正确
<Image source={require('./my-icon.png')} />;// 错误
const icon = this.props.active? 'my-icon-active': 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />;// 正确
const icon = this.props.active? require('./my-icon-active.png'): require('./my-icon-inactive.png');
<Image source={icon} />;
静态的非图片资源
上面描述的require语法也可以用来静态地加载你项目中的声音、视频或者文档文件。大多数常见文件类型都支持,包括.mp3, .wav, .mp4, .mov, .htm 和 .pdf等。
也可以在metro(即 packager)配置文件中添加assetExts配置项来支持其他类型的文件。
需要注意的是视频必须指定尺寸而不能使用flex样式,因为我们目前还不能从非图片资源中获取到尺寸信息。对于直接链接到 Xcode 或者 Android 资源文件夹的视频,则不会有这个限制。
网络图片
<Imagesource={{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 数据,比如一些小图标。
// 请记得指定宽高!
<Imagestyle={{width: 51,height: 51,resizeMode: 'contain'}}source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}}
/>
最合适的相册图片
iOS 会为同一张图片在相册中保存多个不同尺寸的副本。为了性能考虑,从这些副本中挑出最合适的尺寸显得尤为重要。对于一处 200x200 大小的缩略图,显然不应该选择最高质量的 3264x2448 大小的图片。如果恰好有匹配的尺寸,那么 React Native 会自动为你选好。如果没有,则会选择最接近的尺寸进行缩放,但也至少缩放到比所需尺寸大出 50%,以使图片看起来仍然足够清晰。这一切过程都是自动完成的,所以你不用操心自己去完成这些繁琐且易错的代码。
在浏览器中,如果你不给图片指定尺寸,那么浏览器会首先渲染一个 0x0
大小的元素占位,然后下载图片,在下载完成后再基于正确的尺寸来渲染图片。这样做的最大问题是 UI会在图片加载的过程中上下跳动,使得用户体验非常糟糕。在React Native中,有意避免了这一行为。如此一来开发者就需要做更多工作来提前知晓远程图片的尺寸(或宽高比),但我们相信这样可以带来更好的用户体验。然而,读取本地静态图片(使用require(‘./my-icon.png’)语法)则无需指定尺寸,因为它们的尺寸在加载时就可以立刻知道。
比如这样一个引用require(‘./my-icon.png’)的实际输出结果可能是:
//必须指定宽高样式。
{"__packager_asset":true,"uri":"my-icon.png","width":591,"height":573}
背景图片与嵌套写法
return (<ImageBackground source={...} style={{width: '100%', height: '100%'}}><Text>Inside</Text></ImageBackground>
);