Question

此处是React Native的初学者。

我正在开发一个小型App，该App需要根据随机数显示图像。例如，如果我得到203，我想显示图像Project / img / 203.png（随机数在1到726之间）

我尝试的第一件事是require（dynamicPath），阅读文档后，我知道这不是一个好方法，并且我不想静态地需要每个726图像。然后我尝试使用uri语法：

//Executed from Project/components/ folder
loadImage(number){
  imgUri = '../img/'+number.toString()+'.png'  
  return(
    <Image source={{uri: imgUri}} />
)

该应用程序确实启动，但是没有显示图像（即使设置了高度/宽度样式）。我用uri语法看到的示例都是关于从Web URL接收到的图像的，所以我不确定它是否允许从本地存储中获取图像，但是我找不到其他获取图像的方法。

Answer 1

一般规则是，require不能使用动态字符串（有关详细信息，请查看Muhammad Mehar的注释中的链接），因此您需要将所有require d个图像存储到一个数组中：< / p>

const images = [
  require('../img/1.png'),
  require('../img/2.png'),
  ...
  require('../img/726.png'),
];

loadImage(number){
  return <Image source={images[number-1]} />
}

当然，您可以为数组生成代码行，然后将其复制到编辑器中以节省时间。

Answer 2

开关的情况是垃圾。使用模板文字。

loadImage(number){
  imgPath = `../img/${number.toString()}.png` 
  return(
    <Image source={require(imgPath)} />
)

图片：本地图片的动态路径

2 个答案: