Flexbox：如何讓孩子和父母一樣寬？

Question

在我的 React Native 應用程序中，我無法使子項與父項的寬度相同。 請看下圖：

我希望黑色和綠色 View 占據整個屏幕寬度，因此擺脫父級造成的白色背景。

我怎樣才能做到這一點？ 例如，我嘗試將width: 100%應用於孩子，但不起作用。 像這樣的幾個解決方案， 這個和這個在這里不起作用。

這是代碼：

    <View style={styles.containerWholePage}>
      <View>
        <View style={styles.upper}></View>
        <View style={styles.lower}></View>
      </View>
    </View>

const styles = StyleSheet.create({
  containerWholePage: {
    alignItems: 'center',
  },
  lower: {
    alignItems: 'center',
    alignSelf: 'stretch',
    backgroundColor: 'green',
    flex: 6,
    width: '100%', // doesn't work
  },
  upper: {
    alignItems: 'center',
    alignSelf: 'stretch',
    backgroundColor: 'black',
    flex: 3,
    width: '100%', // doesn't work
  },
});

你知道我做錯了什么嗎？

Answer 1

這對我來說是你想要的。

    <View style={styles.containerWholePage}>
  {/* <View> */}
    <View style={styles.upper}></View>
    <View style={styles.lower}></View>
  {/* </View> */}
</View>
const styles = StyleSheet.create({
containerWholePage: {
  alignItems: 'center',
  flex:1,
},
lower: {
  alignItems: 'center',
  alignSelf: 'stretch',
  backgroundColor: 'green',
 // height:100,
  flex: 6,
  width: '100%', // doesn't work
},
upper: {
  alignItems: 'center',
  alignSelf: 'stretch',
  backgroundColor: 'black',
   flex: 3,
//height:200,
  width: '100%', // doesn't work
},

});