Wie erhält man die Position der aktuell fokussierten Eingabe?

Question

Ich muss die Position der aktuell fokussierten Eingabe kennen, um einige Berechnungen durchzuführen. Am Ende möchte ich .measure() darauf anrufen.

Was ich bekommen habe:

import { TextInput } from 'react-native'; 

const { State: TextInputState } = TextInput; 
var currentlyFocussedField  = TextInputState.currentlyFocusedField(); 

console.log('currentlyFocussedField', currentlyFocussedField); 

Aber das gibt nur die ID des Textfeldes (wie 394, und das nächste Feld ist 395). Wie kann ich auf das reale Element/Objekt zugreifen oder wie bekomme ich seine Position auf dem Bildschirm?

Answer 1

Ich weiß nicht, wie Sie auf die React-Komponente von der numerischen in Javascript zugreifen können, aber Sie können die gleiche UIManager.measure(reactTag, callback) Funktion verwenden, die RN intern verwendet, um .measure() arbeiten.

Es ist nicht dokumentiert, aber Sie finden die Quelle here, für iOS und here für Android.

Sie können dies verwenden, um alle Größenwerte der systemeigenen Ansicht abzurufen. Zum Beispiel, Zeichnung von Ihrem Beispiel oben:

import { UIManager, TextInput } from 'react-native'; 

const { State: TextInputState } = TextInput; 
const currentlyFocusedField = TextInputState.currentlyFocusedField(); 

UIManager.measure(currentlyFocusedField, (originX, originY, width, height, pageX, pageY) => { 
    console.log(originX, originY, width, height, pageX, pageY); 
});