2017-02-10 3 views
1

Version von RN ist 0.41.2Reactive Native Android - Wie verhindere ich * <View> automatisch die Größenänderung innerhalb eines Modal?

Wer weiß, wie man Stop Ansicht der die Flexbox verwenden, automatisch „schrumpfen“ ihre Höhe, wenn ein TextInput- Element in einer der Ansichten zum Schlichten verwendet wird? Es ist wahrscheinlich einfacher, dies anhand eines Beispiels zu veranschaulichen, und um es klar zu stellen, können Sie sehen, dass Views in einem <Modal> verschachtelt sind.

Hier ist die Ansicht, wenn keine Tastatur geöffnet ist. Gleiches gilt für beide.

enter image description here

Hier ist, was passiert, wenn TextInput- den Fokus hat. Ich möchte nicht, dass sich diese Ansichten über der Tastatur anpassen. Ich möchte, dass die gelb und blau gefärbten Ansichten 'in voller Größe' bleiben - genau wie im iOS-Screenshot dargestellt.

Derselbe Code, auf iOS, bewegt/justiert die Views nicht (über der Tastatur). Das ist das Verhalten, das ich auch auf Android will.

enter image description here

Hier ist die Probe Methodencode machen. Es ist nur ein Standard-Vorlage-RN-Projekt mit einer Änderung an der Render-Methode, um dies zu testen.

Ich habe versucht, android:windowSoftInputMode="adjustNothing" in AndroidManifest.xml einfügen, hatte aber keine Wirkung. Ich bin sicher, es ist nur eine Requisite oder andere Manifest-Einstellung. Hoffe jemand kann mich wissen lassen?

render() { 
return (
    <View style={styles.container}> 
    <Modal 
     animationType={'slide'} 
     transparent={false} 
     onRequestClose={() => console.log('sd')} 
    > 
     <View style={{flex:1, backgroundColor: 'lightgrey'}}> 

      <View style={{ 
       //height:300, 
       flex: 1, 
       backgroundColor: 'yellow', 
       alignItems: 'center', 
       justifyContent: 'center', 
      }}> 
       <View style={{ 
        margin: 10, 
        //height:100, 
        width: 200, 
        justifyContent: 'center', 
        backgroundColor: 'green'}}> 
        <TextInput style={{height: 40, backgroundColor: 'orange'}}  /> 

       </View> 
      </View> 

      <View style={{ 
       //height:200, 
       flex: 1, 
       backgroundColor: 'blue', 
      }}> 

      </View> 
     </View> 
    </Modal> 
    </View> 
); 
} 

Antwort

1

Haben Sie versucht, alle Inhalte innerhalb eines ScrollView und dann ein Kind KeyboardAvoidingView Verpackung?