如何连接图像源路径

Question

我正在制作一个语言翻译应用程序，我有以下代码

var setInputLang = (item) => {
    this.state.inputLang= item;
    this.inputLangPic = //code here;
}

///This is called within a view in my render function
<TouchableOpacity //Code here to set country   >
    <Image
        source = {require('../img/flags/png/india.png')}
        style = {{flex: 0.33,  height: 50, margin:10}}
    />
</TouchableOpacity>

基本上，我希望能够在按下图像时将输入语言的图片路径设置为正在按下的任何图像

我有多个标志可供选择，并且存储 inputLang 需要为所有这些工作。这就是我打算做的

this.inputLangPic = {require('../img/flags/' + inputLang + '.png')}

这不起作用，我想知道如何做到这一点？当前代码给了我一个错误提示“未知命名模块：'../img/flags/png/india.png'，这很奇怪，因为我之前用过它来生成图像并且它工作得很好

提前致谢

编辑：另外，我将如何将变量从可触摸不透明度传递到 inputLang 中？我已将其标记为“//此处设置国家/地区的代码”

Answer 1

ReactNative 不允许动态加载图像。所有图像（require 语句）都在之前被解析并确保它们存在。为了解决您的问题，您必须先填充图像，然后再使用它们。

这是您可以做到的一种方法

var imageMap = {
  'uk.png' : require('../img/flags/uk.png'),
  'india.png': require('../img/flags/india.png')
}

然后当你想使用图像时

<Image
    source = {imageMap['india.png']}
    style = {{flex: 0.33,  height: 50, margin:10}}
/>