Native Soft Keyboard reagieren Problem

Question

Ich habe TextInput am unteren Rand des Bildschirms. Wenn TextInput fokussiert ist, wird die Tastatur angezeigt und dadurch wird die gesamte Ansicht auf den verfügbaren Bildschirm verkleinert. Ich möchte erreichen, dass das Seitenlayout sich nicht ändert und die Eingabe für den Benutzer sichtbar sein sollte.

<View style={MainView}> 
     <View style={subMain1}> 
      <View style={{flex:1,backgroundColor:'#add264'}}></View> 
      <View style={{flex:1,backgroundColor:'#b7d778'}}></View> 
      <View style={{flex:1,backgroundColor:'#c2dd8b'}}></View> 
     </View> 
     <View style={subMain2}> 
      <View style={{flex:1,backgroundColor:'#cce39f'}}></View> 
      <View style={{flex:1,backgroundColor:'#d6e9b3'}}></View> 
      <View style={{flex:1,backgroundColor:'#69ee9a'}}> 
       <TextInput placeholder="input field"/> 
      </View> 

     </View> 
    </View> 

const Styles = {

MainView:{ 
    flex:1, 
    backgroundColor:'green' 
}, 
subMain1:{ 
    flex:1, 
    backgroundColor:'blue' 
}, 
subMain2:{ 
    flex:1, 
    backgroundColor:'orange' 
} 

}

Answer 1

Ich bin nicht ganz sicher, ob ich verstehen, was das Problem, das Sie in laufen lassen, aber ich vor kurzem mit Tastatur zu kämpfen Vermeiden von Sichten in meiner App - aus irgendeinem Grund funktionierte die native Komponente nicht.

prüfen dieses Paket - es den Trick für mich getan hat, und bietet einige coole Anpassungsmöglichkeiten: https://github.com/APSL/react-native-keyboard-aware-scroll-view

Answer 2

Ich habe gerade eine Antwort auf diese Frage.

Ich muss nur feste Höhe für meinen Hauptbehälter und innen, dass ich Flex Layout verwenden kann. Und wenn die Tastatur den Inhalt versteckt, können wir Scrollview verwenden, das eine scrollbare Oberfläche erlaubt, wenn der Benutzer auf Eingaben klickt.

Dies half mir zu hoffen, dass es anderen helfen kann. :)