wake-up-neo.net

So vermeiden Sie, dass das Tastaturlayout bei Android React-Native nach oben verschoben wird

Ich stehe seit ein paar Monaten vor diesem Problem und kann es immer noch nicht lösen. Ich habe eine Texteingabe am unteren Rand der Ansicht, die mit der Soft-Tastatur aufgetaucht werden sollte, sobald sie angetippt wird Das gesamte Layout wird nach oben verschoben, und Sie können den oberen Teil nicht sehen.

Ich habe viele verschiedene Keyboard-Spacer-Bibliotheken ausprobiert, aber sie alle schieben den TextInput sogar noch höher.

Screenshots: Ohne TastaturMit Tastatur

Hier ist meine Hauptansicht:

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

Hier ist 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>

Verwendung von RN 0.35 auf Android.

androidreact-nativekeyboard
8
Alex Pavtoulov

Das Problem hier ist, dass Sie:

windowSoftInputMode="adjustResize";

Ändern Sie es in:

windowSoftInputMode="adjustPan"
8
Luís Mestre

putten 

Android:windowSoftInputMode="adjustNothing"

in Manifest arbeitete für mich.

3
Arsam

Ich habe alle Lösungen ausprobiert, die ich in GitHub oder Stack Overflow finden konnte. Das Hinzufügen der folgenden Codezeile in AndroidManifest.xml ist hilfreich.

Ich habe es versucht

windowSoftInputMode="adjustPan"

Manchmal funktioniert es, aber es verhält sich schlecht.

Und dann bin ich darüber gekommen

windowSoftInputMode="adjustResize"

Das verhält sich auch nicht gut. Ich habe beide so kombiniert und es funktioniert sofort.

Android:windowSoftInputMode="adjustPan|adjustResize"

Anschließend können Sie die reaktionsspezifische KeyboardAvoidingView-Komponente verwenden.

<KeyboardAvoidingView
    style={{ flex: 1}}
    behavior={Platform.OS === 'ios' ? 'padding' : undefined}
    keyboardVerticalOffset={Platform.OS === 'ios' ? 40 : 0}
  >

Hoffe das hilft dir.

1
Pratap Sharma

Die einzige Lösung, die für mich funktioniert hat, ist: 

Definiere keyboardVerticalOffset und füge alles in eine ScrollView ein keyboardVerticalOffset = {- 500}

<KeyboardAvoidingView style = {styles.container} 
behavior="position" keyboardVerticalOffset={-550}>  

ScrollView
    TextInput

Ich habe viele Lösungen ausprobiert, um Android windowsoft in XML auf Containerhöhe zu ändern. Was ich dann nicht fand, fand ich auf Github .

0
Zuha Karim

Rahmen

Android: windowSoftInputMode = "adjustPan"

auf der MainActivity in AndroidManifest.xml hat bei mir funktioniert!

Jedoch Android:windowSoftInputMode="adjustNothing"wird nicht empfohlen da es Ihnen die Freiheit nimmt, jedes Design ansprechend auf die Tastatur zu gestalten.

0
ishab acharya

Hier sind ein paar tödliche Tutorials für alle, die sich in dieses Gebiet wagen:

Ich werde mir die HOC-Lösung für dieses Projekt in Kürze genau ansehen, aber jetzt muss ich nur dieses Problem lösen, das windowSoftInputMode="adjustPan" Für mich getan hat.

Damit erscheint die Tastatur nur over top der Ansicht. Bei der Standardoption zum Ändern der Größe verwendete jede Komponente flex: 1 Und richtete center aus, sodass die Ansicht alle Arten von Fehlern aufwies. Da meine Ansicht nur eine Eingabe enthält und Teil eines Prozesses mit 8 Ansichten und 8 Schritten ist, ist dies viel zu viel Arbeit für mich, da die Tastatur nicht einmal mit adjustPan über die Eingabe hinausgeht.

Meiner Meinung nach besteht die optimale Lösung darin, <KeyboardAvoidingView /> In Verbindung mit dem Hinzufügen und Entfernen von Ereignis-Listenern und dem Austauschen der Komponente styles mit einigen Statusumschaltern zu verwenden. Dies ist die einzige Möglichkeit, über beide Tastaturzustände die vollständige Kontrolle über die Benutzeroberfläche auf Android und iOS zu erlangen.

0
agm1984

Dank der React Native FB-Gruppe habe ich eine Lösung gefunden: Die Statusleiste muss nicht "verborgen" sein, damit dies funktioniert. Wirklich seltsamer Fehler ..

0
Alex Pavtoulov