react-native - 如何连接图像源路径

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 不允许动态加载图像。所有图像(需要语句)都在之前被解析并确保它们存在。为了解决您的问题，您必须先填充图像，然后再使用它们。

这里有一种方法可以做到这一点

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