React Native 水平排布Tabs内子View无法填充满父容器高度问题

两个水平排布的Tab在外层flexDirection: row布局规则下会默认等高，但是Tab内部承载蓝色侧条、绿色内容区的行容器（设置了flexDirection: row的View）默认高度由内部内容高度决定，没有适配父Tab的高度，所以内容少的Tab里的绿色区域只会和自身内容高度一致，无法填充满父容器。

给Tab组件内flexDirection: row的行容器添加flex: 1样式，让该行容器占满Tab容器除底部黑色10px区域外的所有高度，其内部的绿色View已经设置了flex: 1，会自动填充满行容器高度。

import React from "react";
import { Text, View } from "react-native";

const Tab = ({ textNodes }) => {
  return (
    <View style={{ flex: 1, backgroundColor: "red" }}>
      {/* 给该行容器添加flex: 1 */}
      <View style={{ flexDirection: "row", flex: 1 }}>
        <View style={{ backgroundColor: "blue", width: 10 }}></View>
        <View style={{ backgroundColor: "green", flex: 1 }}>
          {textNodes.map((node) => (
            <Text>{node}</Text>
          ))}
        </View>
      </View>
      <View style={{ height: 10, backgroundColor: "black" }} />
    </View>
  );
};

export default function App() {
  return (
    <View style={{ flexDirection: "row", marginTop: 25 }}>
      <Tab textNodes={[1, 2, 3]} />
      <Tab textNodes={[1, 2, 3, 4]} />
    </View>
  );
}

内容的提问来源于stack exchange，提问作者Vinay Sharma