Javascript 在React Native中禁用Flexbox等高列 澄清

目前我正在使用这个软件包，但我也尝试了react navigation中的这个软件包，并且遇到了相同的问题

基本上，我试图删除默认的flexbox行为“等高列”

介绍 我正在实现一个包含三个场景的选项卡视图。第一个屏幕将是一个无休止且分页的平面列表（其高度未定），而其他两个屏幕则有自己的视图和确定的高度

问题 当呈现第一个选项卡的内容时，其高度良好，但当呈现另一个选项卡且其高度大于第一个选项卡时，它（第一个选项卡）将其高度更改为另一个选项卡的高度

第一个选项卡可以有+100000个项目，但假设当前它只有一个大小为30px的项目。第二个选项卡的高度为40px，最后一个选项卡的高度为50px

在我当前的代码中，会发生以下情况：

紫色的空格不应该出现

代码

---

由于代码很长，我评论说“可能的指导：我也尝试过，但没有人用技巧解决这个问题，就在选项卡0出现在屏幕上时，我将选项卡1和2从flexbox中删除，而当选项卡1或2出现在屏幕上时，我不会删除任何选项卡，因为它们有自己的高度（通过数值计算）.问题是，当从选项卡0滑到1时，这可能是一个丑陋的过渡，但效果很好…此外，正如我在选项卡1和2中对我的数据库进行回迁一样，我不得不将所有这些逻辑移到一个不卸载的父组件。这不是最好的解决方案，但我更喜欢这样来衡量一个无休止的动态列表。

export default function Tab(props) {
  const [index, setIndex] = useState(0);
  const [tab1Height, setTab1Height] = useState(null);
  const [tab2Height, setTab2Height] = useState(null);


  const [routes] = useState([
    { key: "tab0", title: "Tab0" },
    { key: "tab1", title: "Tab1" },
    { key: "tab2", title: "Tab2" },
  ]);

  const handleTabHeights = (height, tabIndex) => { // <--------
     // Do nothing if no height
     if (height <= 0) return;

     switch (tabIndex) {
       case 1:
         setTab1Height(height);
         return;
       case 2:
         setTab2Height(height);
         return;
       default:
         return;
     }
   };

 const renderScene = ({ route }) => { // <--------
    switch (route.key) {
      case "tab0":
        return <EndlessScreen {...this.props} />; // <---- Not handling the scene height because it is undetermined (can be 0, 1000, 30, 9000... any value, and can change in some item is added to the flatlist)
      case "tab1":
        return (
          <View
            onLayout={(event) => // <-------
              handleTabHeights(event.nativeEvent.layout.height, 1)
            }
          >
            <View style={{ height: 40, backgroundColor: "lime" }} {...this.props} />
          </View>
        );
      case "tab2":
        return (
          <View
            onLayout={(event) => // <---------
              handleTabHeights(event.nativeEvent.layout.height, 2)
            }
          >
             <View style={{ height: 50, backgroundColor: "red" }} {...this.props} />
          </View>
        );
      default:
        return null;
    }
  };

 // ... other stuff

 return (
    <TabView
      style={ // <-----------
        index === 0
          ? { flex: 1, backgroundColor: "purple" } <--------- THINKS THAT HERE IS THE PROBLEM
          : {
              height: index === 1 ? tab1Height : tab2Height,
            }
      }
      renderTabBar={renderTabBar}
      navigationState={{ index, routes }}
      renderScene={renderScene}
      onIndexChange={setIndex}
      initialLayout={initialLayout}
      removeClippedSubviews={false} // Pd: Don't enable this on iOS where this is buggy and views don't re-appear.
      swipeEnabled={true}
      lazy={false}
    />
  );