Question

我想把这段代码变成一个可重用的组件，所以我不必写出相同的东西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 };

导入此组件ImgButton后，我用这段代码调用它：

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

我收到错误：＆＃34;需要未知模块＆＃39; ../ img / button_australia.png＆＃39;＆＃34;

我认为将琴弦作为道具传递时我出了问题，但从我看过的例子中我看不出我的错误是什么？完成。谢谢:)）

Answer 1

正如this react-native issue中所讨论的那样，require资产或具有动态生成名称的javascript模块无法实现，例如变量

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

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

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

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

1 个答案: