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')}

这不起作用，我想知道怎么做？当前代码给出了一个错误，说明＆＃34;未知的命名模块：＆＃39; ../ img / flags / png / india.png＆＃39;，这很奇怪，因为我之前使用过这个来生成图像，它工作得很好

提前致谢

编辑：另外，我如何将变量从可触摸的不透明度传递到inputLang？我已将此标记为＆＃34; //此处设置代码以设置国家＆＃34;

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

如何连接图像源路径

1 个答案: