Question

React Native的半新版本，我有一个问题......

我试图根据变量（存储在JSON文件中的ID）要求本地图像，如果我将图像存储在某处并使用了prop，我可以实现这一点：例如source:{uri: 'https://www.domian.com'+this.props.model.id'.png'}，但显然require只需要一个字符串，因此我无法将其传递给变量？

我只会对每个/ if语句使用冗长的但是图像名称会有100多个选项。这是我宁愿将图像存储在本地的另一个原因。

我一直在尝试一些不同的方式，但没有发现任何东西，有什么方法可以解决这个问题吗？

Answer 1

以下对我有用的：

// our data
// we need to require all images, 
// so that React Native knows about them statically
const items = [
    {
        id: '001',
        image: require('../images/001.jpeg'),
    },
    {
        id: '002',
        image: require('../images/002.jpeg'),
    },
];

// render
items.map( (item) => 
    <Image key={item.id} source={item.image} />
)

NB：这是基于@soutot的更新答案，但已简化。我认为不需要布尔值。

Answer 2

根据官方文档，建议使用条件渲染来创建包含正确URI路径的Image require：

// 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} />;

https://facebook.github.io/react-native/docs/images.html

有关条件渲染的更多信息：https://reactjs.org/docs/conditional-rendering.html

使用array的示例（仅举例，可能有拼写错误）：

const imgs = [
  {
   id: '001',
   require: require('../images/001.jpeg'),
  },
  {
   id: '002',
   require: require('../images/002.jpeg'),
  },
];

imgs.map((item, i) => 
item.id === '001' &&
<Image
  key={i}
  source={item.require}
/>)

希望有所帮助

Answer 3

根据您的评论和示例，您提到它就像： imageId是JSON，你使用道具传递它。你的baseurl是一样的吗？然后你可以像下面这样找到单个字符串：

source:{uri: `https://www.domian.com/${this.props.model.id}.png`}

我希望这对你有用：这里有一个例子，我收到来自不同资源的图片的部分网址，与你的相似：

https://github.com/patilrevansidh/movidb/blob/master/src/modules/movie/detail/screen.js

在React Native中动态加载图像

3 个答案: