如何在 React Native 中获取 TextInput 相对于其父级或屏幕的光标位置

Posted 2023-04-18

【中文标题】如何在 React Native 中获取 TextInput 相对于其父级或屏幕的光标位置

【英文标题】：How to get the cursor position of a TextInput relative to its parent or screen in React native

【发布时间】：2019-10-16 09:10:40

【问题描述】：

如果可能没有任何本机 (android/ios) 黑客攻击，是否有任何方法可以在本机反应中获取 TextInput 光标的 Y 位置？我不是指光标选择状态的开始和结束。我想要实现的是，当键盘打开时，我想根据光标的位置显示一个模式，就像在 Facebook 和 Instagram 中提到的那样。或者可能是光标在哪一行？这样我也许可以计算出光标的位置。

意思是，如果光标位于 TextInput 的开头（屏幕顶部），我想将光标下方的模态显示到键盘上。如果光标位于 TextInput 的中间或底部（屏幕顶部和键盘之间的可见区域中间），我想在光标上方显示模态。

用例：

此处，光标位于屏幕顶部。

由于光标位置和键盘之间有空间，我想在光标和键盘之间显示一个模式。

在这种情况下，光标大约在中间，在屏幕顶部和键盘之间。

由于在这种情况下，光标上方到屏幕顶部有很多空间，我想在光标上方显示模态。

用户还可以更改光标位置，并从新的光标位置开始输入。因此，我不能只测量TextInput的高度并依赖TextInput的高度，这就是为什么我需要知道光标Y位置的原因。

【问题讨论】：

我不确定您要达到的目标。 TextInput 是水平的，因此它不会有 Y 位置。您可以上传模型或图表或您需要的内容吗？您是否尝试根据您在屏幕上的点击位置显示文本？

正如@sfratini 所问的那样。TextInput 是水平的。你说的是textarea吗？ “当键盘打开时”，当输入区域获得焦点时，您是什么意思？

@sfratini 我已经用用例及其相关图像更新了帖子，这可能会有所帮助。不，我正在尝试根据光标的位置显示模式。

@ShadabFaiz 我已经更新了可能有助于理解的用例。而且我不认为 React native 有 TextArea。相反，它有 TextInput，它可以是单行或多行的，就像 html 中的 input[text] 或 TextArea。

@Kakar 他刚刚发了两次链接，这里是链接medium.com/@jh3y/…

【参考方案1】：

我希望通过在 TextInput 组件中实现一个虚拟 Text 组件来使用 @JohnKrakov 方法获取光标的位置。但这是不可能的，因为Text component 的性质。我已经设法在 react web 应用程序中解决了这个问题，但没有使用 react native。

但是，我发现了一个 medium post，关于如何在 react native 中提取光标的位置。这是一篇很长的帖子，所以我无法回答这篇帖子中的步骤，而是请您仔细阅读他的帖子并感谢他的工作。

更新

有一个功能请求在 react native 中获取光标位置。如果您也需要，请vote the request in this link。

【参考方案2】：

除了您在链接上看到的内容外，我相信您可以通过 https://facebook.github.io/react-native/docs/textinput#oncontentsizechange 和 onLayout 的组合实现您想要的。

第一个将为您提供正在处理的文本的大小，onLayout 应为您提供周围视图的绝对/相对位置/尺寸，您应该能够计算出光标的位置。