如何在 React Native 中獲取 TextInput 相對於其父級或屏幕的光標位置

Question

如果可能，沒有任何本機（android/ios）黑客，有沒有辦法在反應本機中獲得 TextInput 光標的 Y 位置？ 我不是說光標選擇狀態的開始和結束。 我想要實現的是，當鍵盤打開時，我想根據光標的位置顯示一個模態，就像在 Facebook 和 Instagram 中提到的那樣。 或者可能是光標在哪一行？ 這樣我就可以計算光標的位置。

意思是，如果光標位於 TextInput 的開頭（屏幕頂部），我想將光標下方的模式顯示到鍵盤上。 如果光標位於 TextInput 的中間或底部（屏幕頂部和鍵盤之間可見區域的中間），我想在光標上方顯示模態。

用例：

1. 此處，光標位於屏幕頂部。

由於光標位置和鍵盤之間有空間，我想在光標和鍵盤之間顯示一個模態。

2. 在這種情況下，光標位於屏幕頂部和鍵盤之間的大約中間。

由於在這種情況下，光標上方到屏幕頂部有很多空間，我想在光標上方顯示模態。

3. 用戶還可以更改光標位置，並從新的光標位置開始鍵入。 因此，我不能只測量 TextInput 的高度並依賴於 TextInput 的高度，這就是為什么我需要知道光標 Y 位置的原因。

Answer 1

我希望通過在 TextInput 組件中實現一個虛擬 Text 組件來使用 @JohnKrakov 方法獲得光標的位置。 但這是不可能的，因為Text 組件的性質。 我已經設法在 react web 應用程序中解決了這個問題，但沒有使用 react native。

但是，我找到了一篇關於如何在 react native 中提取光標位置的中等帖子。 這是一篇很長的帖子，所以我無法回答這篇文章中的步驟，而是請您仔細閱讀他的帖子並感謝他的工作。

更新

有一個功能請求可以在 react native 中獲取光標位置。 如果您還需要它，請在此鏈接中投票請求。

Answer 2

除了您在鏈接上看到的內容之外，我相信您可以通過結合使用https://facebook.github.io/react-native/docs/textinput#oncontentsizechange和 onLayout 來實現您想要的。

第一個將為您提供您正在處理的文本的大小，而 onLayout 應該為您提供周圍 View 的絕對/相對位置/尺寸，您應該能夠計算出光標所在的位置。