React native 带图像标签的可重复使用按钮（React Native）

我想把这段代码转换成一个可重用的组件，这样我就不必写同样的东西5次

<TouchableOpacity onPress={console.log('pressed')}>
  <Image
    source={require('../img/button_australia.png')}
  />
</TouchableOpacity> 

我为反映这一点而制作的新组件如下所示：

import React from 'react';
import { Image, TouchableOpacity } from 'react-native';

const ImgButton = ({ onPress, img }) => {

return (
  <TouchableOpacity onPress={onPress}>
    <Image
      source={require(img)}
    />
  </TouchableOpacity>
  );
};

export { ImgButton };

从“React”导入React；
从“react native”导入{Image，TouchableOpacity}；
常量ImgButton=（{onPress，img}）=>{
返回(
);
};
导出{ImgButton}；

导入此组件ImgButton后，我使用以下代码块调用它：

  <ImgButton
     onPress={console.log("pressed")}
     img={'../img/button_australia.png'}
  />

我得到错误：“需要未知模块'../img/button\u australia.png'”

我假设我在将字符串作为道具传递时出错了，但从我查看的示例中，我看不出我所做的有什么问题。谢谢：）

如中所述，

不可能要求资产或javascript模块具有动态生成的名称，例如变量

这是因为React本机打包程序使用
require
（和
import
）语句在编译时生成模块和资产包，因此变量的值未知

最简单的方法是直接将图像源传递给组件：

<ImgButton
  onPress={console.log("pressed")}
  img={require('../img/button_australia.png')}
/>