alignItems： 'フレックスエンド'が正しく動作しない（ページ全体をカバーしない） - 反応しないネイティブ

Question

私のホームページにはフレックスでレイアウトしたボタンが4つあります。私は親のflex：1を設定しました。これは、ページ全体をカバーしていることを意味します（私はbackgroundColorでそれを確認しました）。私の問題は、alignItems： 'flex-end'を設定すると、フレックスがページの半分しかカバーしていないかのように、ボタンが少し下に移動することです。

ここに私のコードのマークアップです：

<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> 

カードスタイル：

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

CardSectionスタイル：

​​

やアイテムのスタイル：

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', 
}, 

は、

そして、これは私が得るものです：

注私はflexWrapを削除する場合、この問題が消えること：「ラップ」が、私はこれを行うことはできません！

アイデア？

Answer 1

正常に動作させるには、<Card>要素がフレックスアイテムの最もフレックスな親である場合に、このような操作を行う必要があります。

フレックス項目が

<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,  
}