alignItems: 'flex-end' funktioniert nicht richtig (es bedeckt nicht die ganze Seite) - reagiere nativ

Question

Also in meiner Homepage habe ich 4 Tasten, die ich mit flex ausgelegt habe. Ich habe den Flex der Eltern festgelegt: 1, was bedeutet, dass es die gesamte Seite abdeckt (das habe ich mit backgroundColor sichergestellt). Mein Problem ist, dass wenn ich alignItems: 'flex-end' setze, die Tasten nur ein wenig nach unten bewegen, so als ob der Flex nur die Hälfte der Seite bedeckt.

Hier ist mein Code Mark-up:

<Card style={styles.cardStyle}> 
     <CardSection style={styles.containerStyle}> 
     <Button onPress={() => navigate("NewScreen")}> 
      New 
     </Button> 
     </CardSection> 

     <CardSection style={styles.containerStyle}> 
     <Button onPress={() => navigate("SavedScreen")}> 
      Saved 
     </Button> 
     </CardSection> 

     <CardSection style={styles.containerStyle}> 
     <Button onPress={() => navigate("ParametersScreen")}> 
      Settings 
     </Button> 
     </CardSection> 

     <CardSection style={styles.containerStyle}> 
     <Button onPress={() => navigate("FMRScreen")}> 
      FMR 
     </Button> 
     </CardSection> 

    </Card> 

-Karten-Art:

cardStyle: { 
    flex: 1, 
    flexDirection: 'row', 
    flexWrap: 'wrap', 
    justifyContent: 'space-around', 
    alignItems: 'center', 
    backgroundColor: '#0000ff', 
} 

CardSection Stil:

containerStyle: { 
    borderBottomWidth: 1, 
    padding: 5, 
    backgroundColor: '#fff', 
    borderColor: '#ddd', 
    height: 150, 
    width: 150, 
    borderRadius: 20, 
    marginTop: 10, 
}, 

Und der Stil für die Elemente:

textStyle: { 
    color: '#007aff', 
    fontSize: 20, 
    fontWeight: '600', 
}, 
buttonStyle: { 
    backgroundColor: 'rgba(255, 255, 255, 0)', 
    borderWidth: 0, 
    borderColor: '#007aff', 
    flex: 1, 
    flexDirection: 'column', 
    justifyContent: 'center', 
    alignItems: 'center', 
}, 

Und das ist, was ich bekommen:

Beachten Sie, dass dieses Problem verschwindet, wenn ich flexWrap entfernen: ‚wrap‘, aber ich kann das nicht!

Irgendwelche Ideen?

Answer 1

Sie müssen etwas tun, damit das funktioniert, wo das Element <Card> das äußerste Flex-Elternelement der Flex-Elemente ist.

Notiere die hinzugefügt alignContent: 'flex-end', die benötigt wird, wenn flex Artikel

<Card style={styles.containerStyle}> 

    <CardSection style={styles.sectionStyle}> 
    <Button onPress={() => navigate("NewScreen")}> 
     New 
    </Button> 
    </CardSection> 

    <CardSection style={styles.sectionStyle}> 
    <Button onPress={() => navigate("SavedScreen")}> 
     Saved 
    </Button> 
    </CardSection> 

    <CardSection style={styles.sectionStyle}> 
    <Button onPress={() => navigate("ParametersScreen")}> 
     Settings 
    </Button> 
    </CardSection> 

    <CardSection style={styles.sectionStyle}> 
    <Button onPress={() => navigate("FMRScreen")}> 
     FMR 
    </Button> 
    </CardSection> 

</Card> 

containerStyle: { 
    flex: 1, 
    flexDirection: 'row', 
    flexWrap: 'wrap', 
    justifyContent: 'space-around', 
    alignItems: 'flex-end', 
    alignContent: 'flex-end', 
    backgroundColor: '#0000ff', 
} 

sectionStyle: { 
    borderBottomWidth: 1, 
    padding: 5, 
    backgroundColor: '#fff', 
    borderColor: '#ddd', 
    height: 150, 
    width: 150, 
    borderRadius: 20, 
    marginTop: 10,  
}