带图像的可重复使用按钮答案

【问题标题】：Reusable Button with Image带图像的可重复使用按钮
【发布时间】：2019-04-16 07:11:49
【问题描述】：

所以我是反应原生和 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>

我收到一条错误消息：Error: component/ImgButtons.js:Invalid call at line 9: require(img)

有人可以帮助我吗？谢谢:)

【问题讨论】：

标签： react-native

【解决方案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>

【讨论】：