reagieren-native <ScrollView/> Größe ändern, wenn Tastatur geöffnet ist

Question

Ich habe eine reagieren-native einfachen Chat-Anwendung, die

+----------------- 
|  Header  | 
+----------------+ 
|    | 
|    | 
| Messages | 
|    | 
|    | 
+----------------+ 
| Write here | 
+----------------+ 

Was ich will, erreichen sieht aus wie dieses ist, dass, wenn ich die Tastatur öffnen sich die Nachrichten anzeigen schrumpfen (Höhe verringern) und ich kann die Kopfzeile und die Texteingabe auch sehen, wie ich jetzt sehe, wenn ich Tastatur öffne, hält die App die Größen, aber die Tastatur drängt den ganzen Inhalt nach oben.

Answer 1

Wir hatten Erfolg mit https://github.com/Andr3wHur5t/react-native-keyboard-spacer.

Man könnte es eingestellt, wie dies für Ihr Beispiel folgenden:

<View style={[{flex: 1}]}> 
    <Header style={{height: 80}}/> 
    <Messages style={{flex: 1}}/> 
    <WriteHere style={{height: 80}}/> 

    {/* The view that will animate to match the keyboards height */} 
    <KeyboardSpacer/> 
    </View>