样式化的组件：使用 react-native 和 react-native-web 悬停答案

【问题标题】：styled components :hover with react-native and react-native-web样式化的组件：使用 react-native 和 react-native-web 悬停
【发布时间】：2018-02-09 10:28:03
【问题描述】：

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

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 定义。

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

【问题讨论】：

也许你可以参考我在onmouseenter event in react native的回答

标签： javascript reactjs react-native styled-components react-native-web

【解决方案1】：

你可以像在 styled-components 的 refs 部分中一样使用 onMouseEnter 和 onMouseLeave。 Advanced guide.

【讨论】：

【解决方案2】：

尝试使用 TouchableHighlight。

您可以定义按下或不按下按钮时的背景颜色！

按照https://facebook.github.io/react-native/docs/touchablehighlight上的指南进行操作

【讨论】：

但那是 onPress 事件。不是悬停事件。

【解决方案3】：

对于原生移动开发来说，悬停没有定义，这是因为屏幕上没有像桌面设备那样的光标。由于 Web 版 React Native 模拟了 RN 的工作方式，因此 :hover 选择器失去了意义

【讨论】：

可能有 0.01% 的用户尝试过这个...您可以将鼠标设备连接到您的手机或平板电脑。一个指针会像在传统的deckstops中一样出现。

【解决方案4】：

您可以使用rn-css，其工作方式类似于样式组件，但在 React-Native 中对 css 的支持更好。

只需将import styled from 'styled-components/native'; 替换为import styled from 'rn-css';，您的代码就可以工作。

【讨论】：