KeyboardAvoidingView - Reset die Höhe, wenn die Tastatur ausgeblendet ist

Eine ausführlichere Erklärung Das Nisarg's Antwort.

Erstellen Sie einen Schlüssel für das KeyboardAvoidingView im Konstruktor

constructor(props) {
    this.state = {
      keyboardAvoidingViewKey: 'keyboardAvoidingViewKey',
    }
}

add-listener auf der Tastatur s/verbarg (und entfernen Sie es in der willUnmount)

import { KeyboardAvoidingView, Keyboard, Platform } from 'react-native'

componentDidMount() {
    //using keyboardWillHide is better but it does not work for android
    this.keyboardHideListener = Keyboard.addListener(Platform.OS === 'android' ? 'keyboardDidHide': 'keyboardWillHide', this.keyboardHideListener.bind(this));
}

componentWillUnmount() {
    this.keyboardHideListener.remove()
}

update der keyboardAvoidingViewKey im keyboardHideListener Funktion, soll ein neuer Wert jedes mal (ich habe ein timestamp) und verwenden Sie diese Taste, wenn das rendering der KeyboardAvoidingView element.

keyboardHideListener() {
    this.setState({
        keyboardAvoidingViewKey:'keyboardAvoidingViewKey' + new Date().getTime()
    });
}

render() {
    let { keyboardAvoidingViewKey } = this.state
    return (
        <KeyboardAvoidingView behavior={'height'} key={keyboardAvoidingViewKey} style={...}>
            ...
        </KeyboardAvoidingView>
    )
}

Hinweis:
Beachten Sie, dass diese neu erstellt die Elemente innerhalb der KeyboardAvoidingView (ich.e: nenne Ihren constructor Funktion, ich bin mir nicht ganz sicher, warum, ich werde aktualisieren, die Antwort nach der tieferen Untersuchung), so müssen Sie zu verfolgen, jeder Staat/prop-Werte, die überschrieben werden kann

Update

Nach eine viel tiefere Untersuchung, ich weiß jetzt, warum die views neu erstellt werden, sobald Sie den Schlüssel ändern.
Um wirklich zu verstehen, warum es passiert, muss man vertraut sein mit, wie reagieren-native löst die render-Befehle an die systemeigene Seite, diese Besondere Erklärung ist ziemlich lang, wenn es Sie interessiert, können Sie Lesen meine Antwort hier. Kurz gesagt, reagieren-native verwendet Reactjs zu diff die änderungen, die dargestellt werden soll, diese Unterschiede werden dann gesendet, als Befehle zu einer Komponente namens UIManager versendet Imperativ Befehle, die zu übersetzen in eine layout-Struktur, welche änderungen das layout basiert auf dem diff-Befehle.
Sobald Sie eine Taste auf eine Komponente, reactjs nutzt Sie diese Taste, um änderungen zu erkennen, sagte der Komponente, wenn diese Taste ändert, reactjs kennzeichnet die Komponente als eine komplett neue zu, die im Gegenzug sendet der erste Befehl zu erstellen, die Sprach-Komponente, so dass alle Kinder, die neu erstellt werden, da es identifiziert als neue Elemente in eine neue layout-Baum, löschen Sie den alten Baum und einen neuen zu erstellen anstatt einfach einstellen der diffs

Wenn Sie möchten, können Sie tatsächlich spy auf diese versendeten Nachrichten, indem Sie den folgenden code auf Ihre App.js Datei:

import MessageQueue from 'react-native/Libraries/BatchedBridge/MessageQueue'
const spyFunction = (msg) => {
    console.log(msg);
};

MessageQueue.spy(spyFunction);

Wenn Sie das tun, werden Sie feststellen, in die Protokolle, die jedes mal den key ändert, der Befehl, der ausgelöst wird, im Gegenzug ist createViews, die wie oben angegeben erstellt alle Elemente, die geschachtelt sind unter den besagten Komponente.

Wrap-Komponenten in <KeyboardAvoidingView behavior="padding" style={styles}> auf iOS und <View style={styles}> auf android

render() {
    const ScrollContainer: View | KeyboardAvoidingView = 
    this.renderDependingOnPlatform();
    const scrollContainerParams: any = {};
    if (isIOS)
        scrollContainerParams.behavior = "padding";
return (
<ScrollContainer style={styles.container} {...scrollContainerParams}>
Scroll and other components
</ScrollContainer>
)}

/**
 * Render scroll container depending on platform
 * @returns {any}
 */
renderDependingOnPlatform() {
    if (isAndroid())
        return View;
    else return KeyboardAvoidingView;
}