样式组件：使用 react-native 和 react-native-web 悬停

Question

我styled-components在 React-Native App 中使用。假设我有链接组件：

import styled from 'styled-components/native';

const Link = styled.Text`
  color: 'red';

  &:hover {
    color: 'blue';
  }
`

之后，我使用react-native-web 来“编译”我的 React-Native 代码。

一切都很好，希望悬停不起作用。（文本颜色保持red悬停。）

我的猜测是https://github.com/styled-components/css-to-react-native正在删除hover定义。

知道如何解决这个问题吗？

Answer 1

对于本机移动开发，悬停没有定义，这是因为屏幕上没有像桌面设备上那样的光标。当 React Native for web 模拟 RN 的工作原理时，:hover 选择器失去了意义

Answer 2

您可以像在样式组件的 refs 部分中一样使用 onMouseEnter 和 onMouseLeave。进阶指南。