React native 为什么我不能在平面列表中使用高度百分比？

我正在尝试使用带有numcolumn的平面列表实现一个7 x 5的gridView。 显然我的身高：“20%”被忽略了，所以网格太小了。 提供一个数字，如高度：200，是否有效。。。。。 但我希望我的布局是响应性的，所以这不是我的选择。 是否有人看到了问题，或者可以向我解释如何实现网格

App.js

import { StatusBar } from 'expo-status-bar';
import React, {useState} from 'react';
import { StyleSheet, Text, View, FlatList } from 'react-native';
import CalendarDay from './components/CalendarDay';

export default function App() {
  const [days, setDays] = useState([
    {date: "1", key:"1"},
    {date: "2", key:"2"},
    {date: "2", key:"3"},
    {date: "2", key:"4"},
    {date: "2", key:"5"},
    {date: "2", key:"6"},
    {date: "2", key:"7"},
    {date: "2", key:"8"},
    {date: "2", key:"9"},
    {date: "2", key:"10"},
    {date: "2", key:"11"},
    {date: "2", key:"12"},
    {date: "2", key:"13"},
    {date: "2", key:"14"},
    {date: "2", key:"15"},
    {date: "2", key:"16"},
    {date: "2", key:"17"},
    {date: "2", key:"18"},
    {date: "2", key:"19"},
    {date: "2", key:"20"},
    {date: "2", key:"21"},
    {date: "2", key:"22"},
    {date: "2", key:"23"},
    {date: "2", key:"24"},
    {date: "2", key:"25"},
    {date: "2", key:"26"},
    {date: "2", key:"27"},
    {date: "2", key:"28"},
    {date: "2", key:"29"},
  ])
  return (
    <View style={styles.container}>
      <View style={styles.calendarFrame}>
        <FlatList data={days}
        renderItem={({item})=>(
          <View style={styles.calendarDay}>
            <CalendarDay></CalendarDay>
          </View>
        )}
        numColumns={7}
        width='100%'
          
        />
  
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    padding : "5%",

  },
  calendarFrame: {
    flex: 1,
    alignSelf: 'stretch',
    textAlign: 'center',
    backgroundColor: "#54f1da" ,

  },
  calendarDay: {
    backgroundColor: "#d5cf6a",
    width: "14.285%",
    height: "20%", //<-----------------doesnt work



  }
});

从“世博会状态栏”导入{StatusBar}；
从“React”导入React，{useState}；
从“react native”导入{样式表、文本、视图、平面列表}；
从“./components/CalendarDay”导入CalendarDay；
导出默认函数App（）{
const[days，setDays]=useState([
{日期：“1”，键：“1”}，
{日期：“2”，键：“2”}，
{日期：“2”，键：“3”}，
{日期：“2”，键：“4”}，
{日期：“2”，键：“5”}，
{日期：“2”，键：“6”}，
{日期：“2”，键：“7”}，
{日期：“2”，键：“8”}，
{日期：“2”，键：“9”}，
{日期：“2”，键：“10”}，
{日期：“2”，键：“11”}，
{日期：“2”，键：“12”}，
{日期：“2”，键：“13”}，
{日期：“2”，键：“14”}，
{日期：“2”，键：“15”}，
{日期：“2”，键：“16”}，
{日期：“2”，键：“17”}，
{日期：“2”，键：“18”}，
{日期：“2”，键：“19”}，
{日期：“2”，键：“20”}，
{日期：“2”，键：“21”}，
{日期：“2”，键：“22”}，
{日期：“2”，键：“23”}，
{日期：“2”，键：“24”}，
{日期：“2”，键：“25”}，
{日期：“2”，键：“26”}，
{日期：“2”，键：“27”}，
{日期：“2”，键：“28”}，
{日期：“2”，键：“29”}，
])
返回(
(
)}
numColumns={7}
宽度='100%'
/>
);
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#fff”，
对齐项目：“居中”，
为内容辩护：“中心”，
填充：“5%”，
},
日历框：{
弹性：1，
自我定位：“拉伸”，
textAlign:'中心'，
背景色：“54f1da”，
},
日历日：{
背景色：“d5cf6a”，
宽度：“14.285%”，
高度：“20%”，//因为calendarFrame是灵活的，所以您无法获得父级的20%高度，这取决于子级的高度。我认为解决方案是测量容器高度，然后计算20%的高度以为每个子级设置

您可以使用onlayout进行测量，申请容器。
因此我使用

<View style={styles.calendarFrame} /*set dayHeight*/onLayout={(event) => {
        this.setState( {dayHeight: event.nativeEvent.layout.height/5, key: this.state.key+1}); 
        console.log(this.state.dayHeight);  }}>
      <FlatList 
        data={this.state.days}
        key={this.state.key}
        renderItem={({item})=>(
          <View style={[styles.calendarDay, {height: this.state.dayHeight}]}>
            <CalendarDay></CalendarDay>
          </View>
        )}
        numColumns={7}
          
      />

 </View>

{
this.setState（{dayHeight:event.nativeEvent.layout.height/5，key:this.state.key+1}）；
console.log（this.state.dayHeight）；}>
(
)}
numColumns={7}
/>

使元素的高度为视图的1/5。感谢所有帮助
<View style={styles.calendarFrame} /*set dayHeight*/onLayout={(event) => {
        this.setState( {dayHeight: event.nativeEvent.layout.height/5, key: this.state.key+1}); 
        console.log(this.state.dayHeight);  }}>
      <FlatList 
        data={this.state.days}
        key={this.state.key}
        renderItem={({item})=>(
          <View style={[styles.calendarDay, {height: this.state.dayHeight}]}>
            <CalendarDay></CalendarDay>
          </View>
        )}
        numColumns={7}
          
      />

 </View>