React Native Web中是否有CSS :hover的等效实现方案？

针对你的问题，有两种主要解决方案：内置原生方式和第三方库，具体如下：

一、内置原生方案（无需额外依赖） #

1. Web端直接使用伪类样式 #

React Native Web 支持在 StyleSheet.create 的样式对象中直接写入 CSS 伪类，仅对 Web 端生效：

const styles = StyleSheet.create({
  element: {
    backgroundColor: "#fff",
    margin: 20,
    ":hover": {
      backgroundColor: "#eee"
    }
  }
})

注意：这种写法只适配 Web 端，移动端（Android/iOS）没有 hover 事件，需要用按压状态替代。

2. 跨平台状态管理方案（适配Web+移动端） #

通过组件状态结合事件监听，统一处理 Web 的 hover 和移动端的按压效果，是跨平台场景的通用做法：

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

export default function YourComponent() {
  const [isActive, setIsActive] = useState(false);

  return (
    <View
      style={[styles.element, isActive && styles.elementActive]}
      // Web端hover事件
      onMouseEnter={() => setIsActive(true)}
      onMouseLeave={() => setIsActive(false)}
      // 移动端按压事件
      onPressIn={() => setIsActive(true)}
      onPressOut={() => setIsActive(false)}
    >
      {/* 组件内容 */}
    </View>
  );
}

const styles = StyleSheet.create({
  element: {
    backgroundColor: "#fff",
    margin: 20,
    padding: 16,
  },
  elementActive: {
    backgroundColor: "#f0f0f0"
  }
});

这种方式在 Web 上触发 hover 时切换样式，在移动端按压组件时也会呈现相同的视觉反馈。

二、第三方库方案（简化代码） #

如果不想手动管理状态，可以用支持跨平台的样式库或手势库：

1. styled-components #

styled-components/native 支持直接写 CSS 伪类，同时自动适配移动端的 active 状态：

import styled from 'styled-components/native';

const StyledElement = styled.View`
  background-color: #fff;
  margin: 20px;
  padding: 16px;

  &:hover {
    background-color: #eee;
  }

  &:active {
    background-color: #ddd;
  }
`;

export default function YourComponent() {
  return <StyledElement>{/* 内容 */}</StyledElement>;
}

2. react-native-gesture-handler #

通过手势处理器更精细地控制交互状态，适合复杂交互场景，核心思路还是通过手势事件更新组件状态来切换样式。

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