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

Dáv*_*ika 7 javascript reactjs react-native styled-components react-native-web

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

import styled from 'styled-components/native';

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

  &:hover {
    color: 'blue';
  }
`
Run Code Online (Sandbox Code Playgroud)

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

一切都很好,希望悬停不起作用。(文本颜色保持red悬停。)

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

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

小智 6

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

  • 可能有 0.01% 的用户尝试过此操作...您可以将鼠标设备连接到您的手机或平板电脑。指针将像传统的甲板停靠点一样显示。 (6认同)

小智 4

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