我试着用3*4的网格划分屏幕的蓝色部分，
Screenshot of current results
我的问题是屏幕底部的蓝色部分，我不知道为什么会这样，即使我做了25%的内部容器高度。
这是我的代码（我使用了样式化组件）：
父组件：

const SafeArea = styled(SafeAreaView)`
  flex: 1;
  margin-top: ${StatusBar.currentHeight}px;
`;

const SmallComponentsContainer = styled.View`
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  background-color: blue;
  flex-direction: row;
`;

export const BiggerComponent = () => (
  <SafeArea>
    <Text> header 1 </Text>
    <Text> Heaader 2 </Text>
    <SmallComponentsContainer>
      <SmallerComponent test={1} />
      <SmallerComponent test={2} />
      <SmallerComponent test={3} />
      <SmallerComponent test={4} />
      <SmallerComponent test={5} />
      <SmallerComponent test={6} />
      <SmallerComponent test={7} />
      <SmallerComponent test={8} />
      <SmallerComponent test={9} />
      <SmallerComponent test={10} />
      <SmallerComponent test={11} />
      <SmallerComponent test={12} />
    </SmallComponentsContainer>
  </SafeArea>
);

子组件：

const ViewComp = styled.View`
  width: 33.333%;
  height: 25%;
  aspect-ratio: 1;
  background-color: gray;
`;

export const SmallerComponent = ({ test }) => {
  return (
    <ViewComp>
      `your text`
      <Text>{test}</Text>
    </ViewComp>
  );
};