web-dev-qa-db-fra.com

Comment éviter la mise en page du clavier sur Android react-native

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.

androidreact-nativekeyboard
8
Alex Pavtoulov

Le problème ici est que vous avez:

windowSoftInputMode="adjustResize";

Changez le en:

windowSoftInputMode="adjustPan"
8
Luís Mestre

en mettant 

Android:windowSoftInputMode="adjustNothing"

dans Manifest a fonctionné pour moi.

3
Arsam

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 .

0
Zuha Karim

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.

0
agm1984

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 ..

0
Alex Pavtoulov