React Native Web/Expo：如何在 Pressable 上模拟焦点可见？

Question

我正在尝试在 React Native Web 中的 Pressable 组件上手动重新创建焦点可见行为。这种人为行为将是这样的，当您单击 Pressable 组件时，它将具有一组样式，但是如果您使用键盘上的选项卡将其聚焦，它将具有一组不同的样式。

谢天谢地，react-native-web 上的 Pressable 已经内置了按下、悬停和聚焦变体。但问题是，无论何时按下 Pressable，focused 之后仍然为真。

有没有办法让按下后focused不正确？
或者，是否有其他技巧可以人为地重新创建焦点可见行为？

<Pressable 
  style={({pressed, hovered, focused}) => [
      {
        backgroundColor: pressed ? "orange" : hovered ? "green" : focused ? "red" : "lightgray", 
        padding: 20 
      }
]}>
    {
      ({pressed, hovered, focused}) => (
        <Text>
          {pressed ? "Pressed" : hovered ? "Hovered" : focused ? "Focused" : "Default"}
        </Text>
      )
    }
</Pressable>

Here is the Expo Snack. 不知道为什么悬停在这个零食上不起作用，但点击后，它会保持红色（聚焦）。有什么办法可以让它在点击后变回灰色？

Answer 1

想通了。

根据您的需要，您需要结合使用轮廓样式和框阴影。

return (
<Pressable style={(state) => [styles.default, state.focused && styles.focusOutline]}>
  <Text style={{fontWeight: "bold"}}>
    Outline styles only
  </Text>
  <Text>Tab: Colored offset outline</Text>
  <Text>Press: n/a</Text>
</Pressable>
)

// styles
const styles = StyleSheet.create({
  default: {
    paddingHorizontal: 15,
    paddingVertical: 10,
    backgroundColor: "powderblue",
    alignItems: "center",
    borderRadius: 20,
  },
  focusOutline: {
    outlineStyle: "solid",
    outlineWidth: 4,
    outlineColor: "skyblue", 
    outlineOffset: 2,
  }
});

Expo Snack

React Native Web/Expo：如何在 Pressable 上模拟焦点可见？

React Native Web/Expo: How to emulate focus-visible on a Pressable?

focus

reactjs

react-native

react-native-web

expo