在React Native下 Image Require Module 使用动态名称

Question

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.

现在只能写成以下这种形式，想问一下，有什么好一点的解决方法吗？

var btnIons = [require('./img/home-icon-message.png'),
               require('./img/home-icon-user.png'),
               require('./img/home-icon-custom-service.png'),
               require('./img/home-icon-trade-record.png'),
               require('./img/home-icon-settle-record.png'),
               require('./img/home-icon-immediately-settle.png')];
               
<Image source={btnIons[this.props.id]} />

Answer 1

require需要bable做转换，所以要在打包的时候知道路径。你要实现动态切换图片，可以通过改变state做到。