在文本组件内垂直对齐 Pressable

Question

<View
  style={{
    flexDirection: "row",
  }}
>
  <Text
    style={{
      flex: 1,
    }}
  >
    By continuing, you agree to our{" "}
    <Pressable
      onPress={...}
    >
      <Text>
        Terms of Service
      </Text>
    </Pressable>
  </Text>
</View>

“服务条款”的印刷位置高于“继续，即表示您同意我们的”。如何垂直对齐它们？或者更准确地说 - 如何让Pressable文本垂直对齐到底部？

Answer 1

这是 React Native 本身的一个 bug。React Native 的 GitHub 上有几个关于此错误的公开报告，但修复它的可能性看起来并不大：

• https://github.com/facebook/react-native/issues/30375View - 对于s 嵌套在 Android 上未对齐的普遍问题Text，核心贡献者做出了回应，但似乎脱轨并陷入了一些具体细节模仿上标和下标。
• https://github.com/facebook/react-native/issues/31955 - 特定于Pressable有人发布了 PR 来修复它，但 Facebook 关闭了它，因为 Facebook 中没有人在它变得陈旧和过时之前对其进行审查与主分支的日期。
• 这个问题评论里也有一些讨论，但问题已经关闭了。

在React Native >= 0.65<Text>中，如果您的内联可按下元素仅使用文本样式，您可以通过使用with onPress（和onPressIn来onPressOut设置按下状态的样式）来解决此问题。粗略的例子：

/**
 * Like a simplified Pressable that doesn't look broken inline in `Text` on Android
 */ 
const TextButton = ({ children, onPress, style, ...rest } => {
  const [pressed, setPressed] = useState(false)
  const onPressIn = () => setPressed(true)
  const onPressOut = () => setPressed(false)
  return (
    <Text
      onPress={onPress}
      onPressIn={onPressIn}
      onPressOut={onPressOut}
      style={typeof style === 'function' ? style({ pressed }) : style}
      {...rest}
    >
      {typeof children === 'function' ? children({ pressed }) : children}
    </Text>
  )
}

但请注意，使用辅助工具选择嵌套在文本内的交互元素也存在错误。如果您可以简单地避免将交互式元素嵌套在文本中，并将其放在自己的行上，那可能会更好：目前 React Native 中并没有很好地支持类似链接的交互式嵌套文本。

在 0.65 之前的旧版 React Native 上，Text 不支持onPressInor onPressOut：

• 如果您不需要Pressable的pressed状态，请使用Text代替Pressable（正如询问者所做的那样：/sf/answers/4661355121/）
• 如果您确实需要按下状态，Text则不支持所需的onPressIn/Out处理程序。然而，它TouchableWithoutFeedback确实支持这些，并且通过将 props 注入到它的子元素中来工作，这样 willText就Text不会被包装View。Text包裹一个TouchableWithoutFeedback并传递可触摸的onPress和onPressIn处理onPressOut程序并自己存储按下的状态。

/**
 * Like a simplified Pressable that doesn't look broken inline in `Text` on Android
 */ 
const TextButton = ({ children, onPress, style, ...rest } => {
  const [pressed, setPressed] = useState(false)
  const onPressIn = () => setPressed(true)
  const onPressOut = () => setPressed(false)

  // TouchableWithoutFeedback modifies and returns its child; this returns `Text`
  // plus press in/out events attached that aren't supported by Text directly.
  return (
    <TouchableWithoutFeedback
      onPress={onPress}
      onPressIn={onPressIn}
      onPressOut={onPressOut}
    >
      <Text
        style={typeof style === 'function' ? style({ pressed }) : style}
        {...rest}
      >
        {typeof children === 'function' ? children({ pressed }) : children}
      </Text>
    </TouchableWithoutFeedback>
  )
}

警告：如果您还使用React Native Web和React Navigation，请不要TouchableWithoutFeedback在 Web 上使用该方法，而应Pressable在 Web 上使用 pure ，因为 React Navigation 的导航函数在传递给 Web 上的 s 时无法可靠地工作，Touchable*因为事件处理程序是如何设置的（但它们在 Pressable 中确实有效），并且这个问题在 Web 上不存在。

Answer 2

下面的代码片段应该可以工作，但如果不尝试就很难理解。如果您可以提供屏幕截图，我可以提供更多帮助，以获得更正确的结果。

<View>
  <Text style={{
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center'
  }}>
    By continuing, you agree to our{" "}
    <Pressable
      onPress={() => {
        navigate("LegalStack", { screen: "Terms" });
      }}
    >
      <Text style={{margin: 'auto'}}>
        Terms of Service
      </Text>
    </Pressable>
  </Text>
</View>