React Native使用onMouseEnter实现图片悬停显示文字不生效

你的代码不生效是三个核心问题导致的：

• onMouseEnter回调里直接写JSX是无效逻辑，事件回调函数里的返回值不会被渲染到组件树，你写的<Text>Hi here</Text>相当于执行了一句无任何作用的表达式，根本不会出现在页面上
• 没有用状态控制视图更新，React体系下视图变化必须靠响应式状态驱动，你没有存储悬停状态，自然没法控制文字显示隐藏
• 要实现文字浮在图片上层的效果，必须给容器和浮层加对应定位样式，否则文字会按正常文档流排布，挤到图片旁边，没法叠在上层

首先在组件里引入useState管理悬停状态，再调整布局样式让浮层叠在图片上，完整代码如下：

import { useState } from 'react';
import { View, Text, Image } from 'react-native';

// 组件函数内部先声明状态
const [isHovered, setIsHovered] = useState(false)

// 渲染部分
<View
  style={{
    flex: 1,
    justifyContent: "center",
  }}
>
  <div
    style={{ position: 'relative' }}
    onMouseEnter={() => setIsHovered(true)}
    onMouseLeave={() => setIsHovered(false)}
  >
    <Image
      source={screen2}
      style={{
        width: "80%",
        height: "80%",
        marginBottom: 150,
        marginTop: 120,
        marginLeft: "-10%",
      }}
    />
    {isHovered && (
      <Text
        style={{
          position: 'absolute',
          top: '50%',
          left: '50%',
          transform: 'translate(-50%, -50%)',
          zIndex: 99,
          color: '#ffffff',
          fontSize: 18,
          backgroundColor: 'rgba(0,0,0,0.65)',
          padding: '6px 14px',
          borderRadius: 4
        }}
      >
        Hi here
      </Text>
    )}
  </div>
</View>

如果你的代码只需要跑在Web端，不需要兼容React Native原生端，完全可以去掉JS事件逻辑，用纯CSS实现，性能更好代码更简洁：

• 给包裹图片的容器加类名img-wrap，设置position: relative
• 把悬停文字直接写在容器里，加类名hover-tip，默认设置display: none，定位、文字样式和上面的内联样式保持一致
• 加CSS规则：.img-wrap:hover .hover-tip { display: block }
  不需要写任何事件监听和状态，浏览器原生就能处理悬停显隐逻辑。

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