如何使三个图像可触摸

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

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

您正在代码中打开一个条件部分，但似乎没有关闭它。查看 {isGift && 并告诉我你在哪里关闭大括号。
您只为最上面的 TouchableOpacity 定义了一个 onPress。您目前无法点击任何其他按钮，因为当您点击时什么也不会发生。

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

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

如何使三个图像可触摸

How to make the three images touchable

android

image

react-native

touchableopacity