React Native中Image的source动态路径

var btnIons = ['message', 'user', 'custom-service',
               'trade-record', 'settle-record.png', 'immediately-settle'];

<Image source={require('./img/home-icon-'+btnIons[this.props.id]+'.png')} />

上面这段代码，发生的错误提示是

Requiring unknown module "./img/home-icon-message.png". If you are
sure the module is there, try restarting the packager.

图片文件的查找会和 JS 模块的查找方式一样。在上面的这个例子里，是哪个组件引用了这个图片，Packager 就会去这个组件所在的文件夹下查找my-icon.png。

注意：为了使新的图片资源机制正常工作，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} />;