根据react-native中的props值动态加载图像？

Question

在我的“img”文件夹下，我有5个文件夹:(“美国”，“欧洲”，“亚洲”，“非洲”，“澳大利亚”）。每个文件夹都包含几个城市图像（欧洲文件夹将包含London.jpg，Paris.jpg，Rome.jpg等...例如）

现在，我的减速机给我2个道具。一个代表非洲大陆，另一个代表属于前一个道具的大陆。

我想要实现的是动态加载城市形象。

这样的事情：

var icon = (this.props.myContinent && this.props.myCity) ? 
      require('./img/'+{this.props.myContinent}+'/'+{this.props.myCity}+'.png');

<Image source={icon} />

我读了this和this，他们给了我一个主意。但我仍然无法解决这个问题。

Answer 1

您的代码无效，因为require中的图像名称必须静态知道。根据docs：

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

// BAD
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />

// GOOD
var icon = this.props.active ? require('./my-icon-active.png') : require('./my-icon-inactive.png');
<Image source={icon} />

虽然这有点不方便，但实施起来相当容易。在你的情况下，我会想到以下几点：

const images = {
    america: {
        caracas: require('images/america/caracas.png'),
        newyork: require('images/america/newyork.png')
    },
    europe:{
        london: require('images/america/london.png'),
        paris: require('images/america/paris.png')
        rome: require('images/america/rome.png')
    },
    asia:{
        // And so on...
    }
}

然后，您的icon初始化应如下所示：

var icon = (this.props.myContinent && this.props.myCity) ? images[this.props.myContinent][this.props.myCity] : null;

在render你可以做这样的事情。 '&&'机制只是检查icon是否为空：

{icon && <Image source={icon} />}

Answer 2

您可以创建带有图像路径对象的图标组件，然后在容器中将城市名称添加到种类道具中。

const paths = {
  'paris': require('./img/europe/paris.png'),
  'london': require('./img/europe/london.png'),
}


export default function Icon({ kind }) {
  return (
    <Image
      source={paths[kind]}
    />
  );
}

然后在容器之类的东西

<Icon kind={this.props.city} />

Answer 3

问题是你没有正确使用三元条件。你在没有?的情况下使用:。条件失败时使用一些图像。

写这样：

var icon = (this.props.myContinent && this.props.myCity) ? 
    require(`./img/${this.props.myContinent}/${this.props.myCity}.png`) 
  : require('./img/defaultImage.png');

<Image source={icon}/>