如何使三个图像可触摸

Question

请帮我制作可触摸的图像，以便我可以调用 onPress 函数

renderSideButtons = (isGift: boolean) => {
    return (
      <View style={{ bottom: 745 }}>     
        <View style={styles.threeButtonsCustom}>
          {isGift && 
          <TouchableOpacity style={styles.threeButtons}
            onPress={this.openAllergenList}>            
            <Image 
              style={[styles.threeButtons, { top: 545 }]} 
              source={require('../../assets/images/icons/gift_fbutton.png')} 
              />
          </TouchableOpacity>}
          <TouchableOpacity style={styles.threeButtons}>
            <Image
              source={require('../../assets/images/icons/star_white.png')}
              style={[styles.threeButtons, { top: 235 }]}
            />
          </TouchableOpacity>
          <TouchableOpacity style={styles.threeButtons}>
            <Image
              source={require('../../assets/images/icons/share_white.png')}
              style={[styles.threeButtons, { top: 195 }]}
            />
          </TouchableOpacity>
        </View>      
      </View>
    );
  };

这里是styles.threeButtons 样式

threeButtons: {
    position: 'absolute', 
    right: 175, 
    width: 50, 
    resizeMode: 'contain', 
    flexDirection: 'row-reverse'
  },

以及额外的样式

threeButtonsCustom:{ 
flex: 1, 
flexDirection: 'row-reverse', 
position: 'absolute', 
marginTop: '20%', 
zIndex:1 }

[1]：https://imgur.com/a/46K5bvi 例如礼物图片

Answer 1

我在您的代码中注意到了几件事。

1. 您正在代码中打开一个条件部分，但似乎没有关闭它。看看{isGift &&，告诉我你在哪里关闭你的大括号。

2. 您只为最顶层的TouchableOpacity 定义了一个onPress。您目前无法单击任何其他按钮，因为这样做不会发生任何事情。

解决这两个问题，然后告诉我你在哪里。

另外，为了将来参考，您应用到您有疑问的组件的任何样式都可以在您的初始问题中给出，并且在提供人们在 cmets 中要求的样式时，应该对您的问题进行编辑，以便将来访问者可以很容易地看到它。