2017-07-08 6 views
0

ich das folgende Layout haben, und es muss scrollen, wenn Daten größer der Bildschirm ist:React-native Scroll nicht funktionieren

Image:

enter image description here

Code:

export default () => (
    <Container hasNavBar={false}> 
    <View style={{flex: 1}}> 
     <View style={Styles.container}> 
     <View style={{ 
      flex: 1, backgroundColor: 'red', 
      alignItems: 'center', 
      justifyContent: 'center', 
     }}> 
      <Text>Area 1</Text> 
     </View> 

     <View style={{ 
      flex: 2, backgroundColor: 'yellow', 
      alignItems: 'center', 
      justifyContent: 'center', 
     }}> 
      <Text>Area 2</Text> 
     </View> 
     </View> 

    </View> 
    </Container> 
); 

Nach der Dokumentation von react-native für hinzufügen scroll ich mit Scroll Komponente erstellen müssen eine wraper meines Layout, aber wenn Scroll Komponente mein Layout brach hinzugefügt:

Image:

enter image description here

Code:

export default () => (
    <Container hasNavBar={false}> 
    <ScrollView style={{flex: 1}}> 
     <View style={Styles.container}> 
     <View style={{ 
      flex: 1, backgroundColor: 'red', 
      alignItems: 'center', 
      justifyContent: 'center', 
     }}> 
      <Text>Area 1</Text> 
     </View> 

     <View style={{ 
      flex: 2, backgroundColor: 'yellow', 
      alignItems: 'center', 
      justifyContent: 'center', 
     }}> 
      <Text>Area 2</Text> 
     </View> 
     </View> 

    </ScrollView> 
    </Container> 
); 

Container Komponente

<View style={flex: 1}> 
     {this.props.children} 
     <DropdownAlert 
      closeInterval={10000} 
      updateStatusBar={false} 
      ref={(ref) => this.dropdown = ref} 
      onClose={() => null}/> 
     </View> 

Wie löse ich es?

+0

was ist 'C ontainer'? Bist du sicher, dass es die Top-Level-Komponente sein sollte? – vonovak

+0

@VojtaNovak Ich habe den Containerkomponentencode hinzugefügt, es ist ein einfacher Wrapper für das Hinzufügen einer globalen Warnung in allen Seiten, die Ihr Kind es sein wird. – 1fabiopereira

+0

Schauen Sie sich mit 'flexGrow: 1' anstelle von' flex: 1' an. Die 'flex'-Eigenschaft ist eine Abkürzung für' flexGrow' und 'flexShrink' und die letztere kann Ihr Design abschütteln. –

Antwort

1

Nachdem Sie die Frage mit besserem Verständnis Ihres vollständigen Codes erneut gelesen hatten, wurde es offensichtlich, dass die schnellste Lösung darin bestand, minHeight in den Ansichten von Area 1 und Area 2 zu definieren. Wir können es aus dem Fenster Dimensions berechnen. Dies ermöglicht es Ihnen, das 33%/66% -Verhältnis mit minimalem Inhalt zu erhalten und den Bereich nach Bedarf mit zusätzlichen Inhalten zu erweitern.

dieser Platz an der Spitze machen():

const { height } = Dimensions.get('window');

In dem Bereich 1 Stil

minHeight: height/3

Und Area 2 Stil

minHeight: (height/3) * 2

+0

Styles.container hat eine {flex: 1}, und wenn ich contentContainerStyle verwende, gibt das Layout keinen scroll, aber yeah adjust innerhalb des Bildschirms, und ich möchte den Inhalt scroll haben. – 1fabiopereira

+0

Ich habe die Dinge ursprünglich falsch verstanden. Überprüfen Sie die aktuelle Antwort. Normalerweise vermeide ich die Verwendung von Dimensionen, wenn es mir möglich ist, aber oft ist es einfacher, Rohwerte basierend auf dem Bildschirm/Fenster zu berechnen, um ein bestimmtes Verhalten zu erreichen. Möglicherweise müssen Sie in Ihrer minHeight-Berechnung auch die Höhe eines Headers berücksichtigen. –