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

Question

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

import styled from 'styled-components/native';

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

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

之后，我编译了＃39;我的React-Native代码react-native-web。

所有人都非常期待悬停不起作用。 （悬停时文字颜色保持red。）

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

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

Answer 1

您可以在样式组件的refs部分中使用onMouseEnter和onMouseLeave。 Advanced guide

Answer 2

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

只需将import styled from 'styled-components/native';替换为import styled from 'rn-css';，您的代码即可使用。

Answer 3

尝试使用TouchableHighlight。

您可以定义是否按下按钮的背景色！

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

Answer 4

对于本机移动开发，悬停没有定义，这是因为屏幕上没有游标，就像台式机上的游标一样。当React Native for web模拟RN的工作方式时，：hover选择器失去了意义