Réagir Natif: Blocs de clavier multiline textInput lors du réglage de la hauteur de la vue

Question

J'ai essayé de faire un textinput croissant avec plusieurs lignes maintenant pendant un moment, et trouve maintenant mon application dans une situation où le clavier bloque le texte en entrant une nouvelle ligne sur l'entrée de texte. J'ai essayé des solutions allant des solutions basées sur KeyboardAwareScrollView aux solutions ScrollView, mais hélas, rien de ce que j'ai essayé n'a encore fonctionné.

J'apprécierais vraiment si quelqu'un pourrait me fournir une solution qui fonctionne à la fois pour Android et iOS.

Ce que j'ai maintenant une vue avec une textinput avec multiligne prop

<View style={{ height: this.state.height, flex: 1 }}> 
    <TextInput 
    {...otherProps} 
    placeholder="Skriv här" 
    placeholderTextColor="rgba(0,0,0,0.3)" 
    blurOnSubmit={false} 
    multiline 
    onContentSizeChange={this._onContentSizeChange} 
    style={[styles.textInputStyle, { height: this.state.height }]} 
    /> 
</View> 

avec la fonction _onContentSizeChange comme suit:

_onContentSizeChange = (event): void => { 
    const height = event.nativeEvent.contentSize.height; 
    this.setState({ height }); 
} 

problème illustré avec des images: imgur album

Answer 1

KeyboardAvoidingView semble être la solution pour vous. Vous pouvez définir la distance entre votre vue et le clavier et le calculer avec la hauteur de votre entrée. Dans les documents, vous trouverez toutes les propriétés: https://facebook.github.io/react-native/docs/keyboardavoidingview.html

Vous pouvez également essayer d'utiliser KeyboardAvoidingScrollView, puis lorsque votre saisie est suffisamment élevée, il vous suffit de faire défiler l'écran.

Voici un article impressionnant avec de grands exemples de clavier évite: https://medium.freecodecamp.org/how-to-make-your-react-native-app-respond-gracefully-when-the-keyboard-pops-up-7442c1535580

Hope it helps.