React Native: comment conserver l'entrée de texte multi-ligne visible au-dessus du clavier

Question

J'ai un TextInput avec multiline défini sur true. Je défilement à l'entrée sur le focus avec:

scrollResponder.scrollResponderScrollNativeHandleToKeyboard(
    React.findNodeHandle(this.refs.myInput), 
    0, 
    true 
); 

Cependant, lorsque le TextInput multiligne étend le texte sera caché sous le clavier. Je veux seulement faire défiler vers le bas lorsque le curseur/texte actuel n'est pas visible. Donc, je ne peux pas simplement exécuter le code ci-dessus sur le changement de texte car il ferait défiler la vue même si le curseur actuel/texte actuel est visible (comme l'édition sur la première ligne).

Y a-t-il un moyen d'obtenir la position du curseur/texte actuel à l'écran? Ou y a-t-il un autre moyen de faire ce que j'essaie de faire?

Actuellement:

Ce que je suis en train de réaliser:

Answer 1

Vous pouvez utiliser la méthode onLayout, fournie par la vue (dont le texte étend). Il renvoie les dimensions de la vue, que vous pouvez utiliser pour recalculer la position de défilement de votre scrollview.

Answer 2

J'ai trouvé ce composant ... mais ça ne marche pas pour moi (j'ai des erreurs sur "import"). Je suppose qu'ils finiront par se réparer.

https://github.com/VansonLeung/react-native-keyboard-aware-view

Answer 3

La meilleure façon de le faire semble être avec la bibliothèque réagira-clavier-défilement-courant natif vue et utiliser la méthode _scrollToInput et suivre ce que disent les documents.

La seule chose que je devais changer était d'appeler "this.scroll.props.scrollToFocusedInput (reactNode)" au lieu de "this.scroll.scrollToFocusedInput (reactNode)" dans la documentation!