KeyboardAvoidingView auf dem iPhone überlappende Bildschirm X

Question

Moment habe ich eine KeyboardAvoidingView mit einem hartcodiert keyboardVerticalOffset von 64. Dies funktioniert auf dem iPhone, ist aber etwa 20px kurz auf dem iPhone X.

Die Komponente sieht wie folgt aus:

Gibt es einen besseren Weg zu bestimmen, was keyboardVerticalOffset als hart Codierung eines Wertes sein sollte? Gibt es noch etwas anderes, das ich bei der Bauteilplatzierung anders machen könnte? Ich bin offen für irgendwelche Vorschläge.

iPhone 8

iPhone X

Answer 1

Also habe ich eine schnelle Überprüfung, da mein Verständnis davon, wie dies in nativen iOS zu tun, und es scheint wie in neueren Versionen von nativen reagieren, können Sie dies relativ einfach tun.

Es scheint ein paar Optionen zu geben, abhängig von Ihren Flexibilitätsanforderungen.

Zuerst haben Sie versucht, KeyboardAvoidView anstelle eines Standardcontainers View ohne Angabe keyboardVerticalOffset zu verwenden?

Eine andere Option, die Ihnen viel mehr Kontrolle gibt (ähnlich wie in einer nativen iOS-App), ist die Verwendung des Moduls Keyboard, um Listener für Tastaturereignisse zu erstellen.

componentWillMount() { 
    this.keyboardWillShowSub = Keyboard.addListener('keyboardWillShow', this.keyboardWillShow); 
    this.keyboardWillChangeSub = Keyboard.addListener('keyboardWillChangeFrame', this.keyboardWillChange); 
    this.keyboardWillHideSub = Keyboard.addListener('keyboardWillHide', this.keyboardWillHide); 
    } 

    componentWillUnmount() { 
    this.keyboardWillShowSub.remove(); 
    this.keyboardWillChangeSub.remove(); 
    this.keyboardWillHideSub.remove(); 
    } 

Dies würde ermöglichen es Ihnen, die Tastaturhöhe vom Ereignisparameter zu erhalten:

keyboardWillShow = (event) => { 
    Animated.parallel([ 
     Animated.timing(this.keyboardHeight, { 
     duration: event.duration, 
     toValue: event.endCoordinates.height, 
     }), 
     Animated.timing(this.imageHeight, { 
     duration: event.duration, 
     toValue: IMAGE_HEIGHT_SMALL, 
     }), 
    ]).start(); 
    }; 

Wiederholen Sie etwas ähnliches für keyboardWillChange und keyboardWillHide.

Für eine bessere, genauere Erläuterung der Optionen finden Sie auf dieser Seite: https://medium.freecodecamp.org/how-to-make-your-react-native-app-respond-gracefully-when-the-keyboard-pops-up-7442c1535580

ich die beste erste Test denke, die keyboardVerticalOffset bevor Sie versuchen, den Code zu versuchen, wäre zu entfernen hinzufügen, um die keboard Ereignisse zu behandeln.

Answer 2

Ich habe eine benutzerdefinierte Komponente verwendet, um diese Situation zu überwinden.

import React from "react"; 
import {Animated, Keyboard} from "react-native"; 

export default class KeyboardAwareComponent extends React.Component { 

    constructor(props) { 
     super(props) 
     this.keyboardHeight = new Animated.Value(0); 
    } 

    componentWillMount() { 
     this.keyboardWillShowSub = Keyboard.addListener('keyboardWillShow', this.keyboardWillShow); 
     this.keyboardWillHideSub = Keyboard.addListener('keyboardWillHide', this.keyboardWillHide); 
    } 

    componentWillUnmount() { 
     this.keyboardWillShowSub.remove(); 
     this.keyboardWillHideSub.remove(); 
    } 

    keyboardWillShow = (event) => { 
     Animated.parallel([ 
      Animated.timing(this.keyboardHeight, { 
       duration: event.duration, 
       toValue: event.endCoordinates.height, 
      }) 
     ]).start(); 
    }; 

    keyboardWillHide = (event) => { 
     Animated.parallel([ 
      Animated.timing(this.keyboardHeight, { 
       duration: event.duration, 
       toValue: 0, 
      }) 
     ]).start(); 
    }; 

    render(){ 
     const {children, style, ...props} = this.props 
     return(
      <Animated.View style={[{flex:1,alignItems:'center',paddingBottom: this.keyboardHeight},style]} {...props}> 
       {children} 
      </Animated.View> 
     ); 
    } 

} 

Verwenden Sie einfach die Komponente "KeyboardAwareComponent" als Root-Komponente einer beliebigen Seite. Es wird automatisch die Ansicht anpassen, wenn die Tastatur ein- oder ausgeblendet wird.

Beispiel: ---

YourComponent extends React.Component{ 
    render(){ 
     <KeyboardAwareComponent> 
      {Your child views} 
     </KeyboardAwareComponent> 
    } 
}