react-native - 带有图像标签的可重用按钮(React Native)

Question

我想将这部分代码变成一个可重用的组件，这样我就不必将相同的东西写出 5 次。

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

我为反射(reflect)这一点而制作的新组件如下:

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

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

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

我收到错误:“需要未知模块‘../img/button_australia.png’”

我假设我在将字符串作为 prop 向下传递时出错了，但从我看过的示例来看，我看不出我所做的有什么问题。谢谢:)

Answer 1

如 this react-native issue 中所述，不可能require Assets 或具有动态生成名称的 javascript 模块，例如变量。

这是因为 React Native 打包器使用 require(和 import)语句在编译时生成模块和 Assets 包，所以变量的值为未知。

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

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