点击右侧IconButton时图标消失问题求助（附代码）

问题根源 #

你的代码里父View设置了height:15，但IconButton的size是20，远小于容器高度。加上IconButton用了绝对定位，导致图标部分超出父容器范围，Tooltip无法正确识别图标的点击交互区域，触发了离开逻辑让图标消失。另外，Tooltip直接包裹绝对定位元素时，容易出现布局和事件冲突。

修复方案 #

1. 调整父容器高度，确保能容纳IconButton的尺寸
2. 将绝对定位从IconButton移到Tooltip组件上，让Tooltip管理自身的布局位置

修改后的代码 #

<View style={{
  marginTop: 10,
  marginBottom: 7,
  position: 'relative', // 作为绝对定位的参考容器
  height: 20, // 匹配IconButton的size，确保图标完全在容器内
}}>
  <Tooltip
    title={
      <View style={{
        backgroundColor: 'rgba(0, 0, 0, 0.3)',
        padding: 10,
        borderRadius: 8,
      }}>
        <Text style={{ fontSize: 12 }}>This is a tooltip!</Text>
      </View>
    }
    enterTouchDelay={0}
    leaveTouchDelay={2500}
    visible={visible}
    style={{ position: 'absolute', right: 8 }} // 把绝对定位移到Tooltip上
  >
    <IconButton
      icon="information"
      disabled={false}
      size={20}
      onPress={handleIconPress}
      // 移除IconButton上的绝对定位样式
    />
  </Tooltip>
</View>

额外检查 #

确认handleIconPress函数的逻辑，确保它只是控制visible状态为true，没有其他会影响IconButton显示的操作：

const handleIconPress = () => {
  setVisible(true);
};

内容的提问来源于stack exchange，提问作者Shubham Kumar