使用 ImageSet

通过项目创建流程创建项目后,会在项目中生成QFontSet.jsQImageSet.js两个文件,用于管理 iconfont 和静态图片资源。

如果项目中没有这两个文件,可以在这里找到模板文件。

由命令行生成的项目,应该会在 index.js 中包含如下注释:

/**
 * @includesModules QFontSet, QImageSet
 */

上传图片

QRN 对于 ImageSet 使用 http url 的形式加载。因此需要将图片上传至外网可访问的位置,推荐使用 Source

在项目发布时,QImageSet 中的所有图片会由发布系统打包进应用,不会直接连接线上下载。

向 ImageSet 添加图片

打开项目的QImageSet.js,按照如下形式加入字体:

module.exports = {
  // "图片名称" : "图片的线上 URL" 
  // 可以添加多项
  // 暂不支持@2x等后缀
  "icon1" : "http://s.qunarzz.com/qrn_demo/test_hybridId_icon1.png"
}

使用 ImageSet 中的图片

直接在<Image>标签中通过source引用图片:

let Images = require('QImageSet');

<Image style={{width: 40, height: 40}} source={{uri: Images.icon1}} />