Je suis confronté à ce problème pendant quelques mois et je ne peux toujours pas le résoudre . J'ai une saisie de texte au bas de la vue qui est supposée apparaître avec le clavier logiciel une fois que vous avez appuyé sur . , toute la mise en page est poussée et vous ne pouvez pas voir la partie supérieure de celle-ci.
J’ai essayé de nombreuses bibliothèques d’entretoises de clavier, mais toutes poussent encore plus haut le TextInput.
Captures d'écran: Sans clavierAvec clavier
Voici ma vue principale:
<View
style={{
flex: 1,
alignItems: 'stretch',
justifyContent: 'space-between',
overflow: 'hidden',
backgroundColor: Colors.darkBlue
}}
>
{/* Header */}
<View
style={{
flexDirection: 'row',
alignItems: 'stretch',
height: 300
}}>
{/* Question bubble */}
{ (this.state.question && this.state.question !== '') ? (
<TouchableOpacity
style={{
flex: 1,
flexDirection: 'row',
backgroundColor: 'transparent',
alignItems: 'stretch',
paddingRight: QUESTION_SPEAKER_RADIUS
}}
>
<View
style={{
flex: 1,
alignSelf: 'stretch',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'white',
}}
>
<Text>
{this.state.question}
</Text>
</View>
</TouchableOpacity>
) : null
}
</View>
<KeyboardInput
style={{}}
onClose={() => this.setState({ displayMode: DISPLAY_MODES.homeEmpty })}
onConfirm={(text) => this.onConfirmText(text) }
/>
</View>
Voici KeyboardInput:
<View
style={{
alignSelf: 'stretch',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'flex-end',
backgroundColor: Colors.pink,
borderColor: Colors.Lime,
borderTopWidth: 4,
padding: 6,
}}>
<View
style={{
flex: 1,
borderRadius: 6,
padding: 0,
backgroundColor: Colors.white,
alignItems: 'stretch',
}}
>
<TextInput
placeholder={Strings.child_keyboard_placeholder}
value={this.state.messageTextInput}
onChangeText={(text) => this.setState({messageTextInput: text})}
style={{
height: 50,
marginLeft: 10,
marginRight: CONFIRM_BUTTON_SIZE / 2
}}
underlineColorAndroid='transparent'
numberOfLines={2}
maxLength={70}
autoCorrect={false}
returnKeyType='next'
/>
</View>
</View>
Utilisation de RN 0.35 sur Android.
Le problème ici est que vous avez:
windowSoftInputMode="adjustResize";
Changez le en:
windowSoftInputMode="adjustPan"
en mettant
Android:windowSoftInputMode="adjustNothing"
dans Manifest a fonctionné pour moi.
La seule solution qui a fonctionné pour moi est la suivante:
Définir keyboardVerticalOffset et tout mettre dans un ScrollView mettre keyboardVerticalOffset = {- 500}
<KeyboardAvoidingView style = {styles.container}
behavior="position" keyboardVerticalOffset={-550}>
ScrollView
TextInput
J'ai essayé de nombreuses solutions, allant de la modification de Windows sous Android en XML à la hauteur du conteneur, et puis je n'ai pas trouvé cette solution sur Github .
Voici quelques tutoriels mortels pour quiconque s'aventure dans ce domaine:
Je vais bientôt examiner de très près la solution HOC pour ce projet, mais pour le moment, j’ai juste besoin que ce problème soit réglé, ce que windowSoftInputMode="adjustPan"
a fait pour moi.
Avec cela, le clavier vient juste de monter en haut de la vue. Avec l'option de redimensionnement par défaut, chaque composant utilisait flex: 1
et justifier/aligner center
, de sorte que la vue était mutilée. Étant donné que ma vue ne comporte qu'une entrée et fait partie d'un processus en 8 étapes, c'est beaucoup trop de travail pour moi, étant donné que le clavier ne dépasse même pas l'entrée avec adjustPan
.
Mais, à mon avis, la solution optimale consiste à utiliser <KeyboardAvoidingView />
conjointement avec les fonctions d'écoute d'ajout et de suppression d'événement et le composant d'échange styles
avec des basculements d'état. C'est le seul moyen d'obtenir un contrôle total sur l'interface utilisateur sur Android et iOS via les deux états du clavier.
Grâce au groupe FB natif de React, j’ai trouvé une solution: .__ La barre d’état ne doit pas être "masquée" pour que cela fonctionne. Bug vraiment bizarre ..