javascript - 样式化的组件：使用 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悬停。）

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

score 5 · Accepted Answer

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

score 4 · Accepted Answer

你可以使用 onMouseEnter 和 onMouseLeave，就像在 styled-components 的 refs 部分中一样。高级指南。

score 2 · Accepted Answer

您可以使用rn-css，它的工作方式类似于 styled-components，但在 React-Native 中对 css 有更好的支持。

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

score -1 · Accepted Answer

尝试使用 TouchableHighlight。

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

4 回答 4