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 &&，然后告诉我要关闭大括号的位置。
您仅为最顶层的onPress定义了一个TouchableOpacity。您目前无法点击其他任何按钮，因为这样做时什么也不会发生。

解决这两个问题，然后让我知道您的位置。

此外，供您参考的任何应用于您有疑问的组件的样式都可以在您的初始问题中给出，并且当提供样式的人在评论中提出要求时，应该对您的问题进行编辑，以便将来使用访客可以轻松看到它。

如何使三个图像可触摸

1 个答案: