Question

因此，我是本机和javascript的新成员，我想使用图像创建可重复使用的按钮，并且找到了此代码

import React from 'react';
import { Image, TouchableOpacity } from 'react-native';

const ImgButtons = ({ onPress, img }) => {

return (
  <TouchableOpacity onPress={onPress}>
    <Image
      source={require(img)}
    />
  </TouchableOpacity>
  );
};

export { ImgButtons };

我称之为组件

 <View style={styles.innerContainer}>
        <ImgButtons
           img={require('../assets/btn-reg-1.jpg')}/>
  </View>

我得到一个错误提示：错误：component / ImgButtons.js：第9行的无效调用：require（img）

有人可以帮我吗？谢谢：）

Answer 1

在您的自定义组件中，我编辑了以下图像源检查：

import React from 'react';
import { Image, TouchableOpacity } from 'react-native';

const ImgButtons = ({ onPress, img }) => {

return (
  <TouchableOpacity onPress={onPress}>
    <Image
      source={img}
    />
  </TouchableOpacity>
  );
};

export { ImgButtons };

然后您必须在onPress上传递一些方法

<View style={styles.innerContainer}>
    <ImgButtons
       img={require('../assets/btn-reg-1.jpg')}
       onPress={()=>console.log('Action')}
    />
</View>

带有图像的可重复使用按钮

1 个答案: