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

Question

有没有办法在没有任何 native (android/ios)hack 的情况下，在 native react 中获取 TextInput 光标的 Y 位置？我不是指光标选择状态的开始和结束。我想要实现的是，当键盘打开时，我想根据光标的位置显示一个模态，就像在 Facebook 和 Instagram 中提到的那样。或者可能是光标在哪一行？这样我就可以计算出光标的位置。

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

用例:

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

因为光标位置和键盘之间有空间，所以我想在光标和键盘之间显示一个模式。

1. 在这种情况下，光标位于屏幕顶部和键盘之间的中间位置。

因为在这种情况下，光标上方到屏幕顶部有很多空间，所以我想在光标上方显示模式。

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

Answer 1

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

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

更新

在 React Native 中有一个获取光标位置的功能请求。如果您也需要，欢迎vote the request in this link .