Javascript 反应本机选项卡视图：如果嵌套在平面列表中，如何调整场景？

我的代码中有一个平面列表，在页脚中有一个选项卡视图。此选项卡视图渲染具有flex:1样式的场景

问题是，如果我加载应用程序并看到结果，则选项卡场景的宽度和高度无法覆盖自由布局

单位代码

constrenderheader=（）=>(
{/*  (
{/* 
);
返回(
);
}
const styles=StyleSheet.create({
场景：{
弹性：1//
const renderHeader = () => (
    <View style={{width: "100%", height: 350}}> {/* <--------------- */}
      <Header
        uploadProgress={uploadProgress}
        onConfigurationButtonPress={handleConfigurationDisplay}
      />
    </View>
  );

  const renderFooter = () => (
    <View style={{ flex: 1 }}> {/* <--------------- */}
      <Tab /> {/* <------ */}
    </View>
  );

<View style={[styles.container, { backgroundColor: colors.white }]}> {/* styles.container is just flex: 1 */}
  <FlatList
    ref={scrollRef}
    refreshControl={...}
    ListHeaderComponent={renderHeader()}
    ListFooterComponent={renderFooter()}
  />
  <Modal
    animationType="slide"
    visible={isConfigurationVisible}
    onRequestClose={handleConfigurationDisplay}
    hardwareAccelerated
    statusBarTranslucent
    transparent
  >
    <View
      style={[styles.modalView, { backgroundColor: colors.white }]}
    >
       {/*TODO*/}
    </View>
  </Modal>
</View>

...

const FirstRoute = () => <View style={styles.scene} />; // <------------ It has flex: 1...

const SecondRoute = () => <View style={styles.scene} />;  // <------------ It has flex: 1...


const renderScene = SceneMap({
    posts: FirstRoute,
    tags: SecondRoute,
});

  const renderTabBar = (props) => (
    <TabBar
      {...props}
      indicatorStyle={{ backgroundColor: colors.primary }}
      style={[
        styles.tab,
        {
          backgroundColor: colors.white,
          colors: colors.black,
        },
      ]}
      renderLabel={({ route, focused }) => (
        <Text
          style={[
            styles.text,
            {
              color: focused ? colors.primary : colors.black,
            },
          ]}
        >
          {route.title}
        </Text>
      )}
    />
  );

  return (
    <TabView
      renderTabBar={renderTabBar}
      navigationState={{ index, routes }}
      renderScene={renderScene}
      onIndexChange={setIndex}
      initialLayout={initialLayout}
    />
  );
}

const styles = StyleSheet.create({
  scene: {
    flex: 1, // <------------------------
    backgroundColor: "red",
  },
  tab: {
    elevation: 0,
  },
  text: {
    marginVertical: 8,
  },
});