在React Native中禁用Flexbox等高列

如何解决在React Native中禁用Flexbox等高列

澄清

目前，我正在使用此软件包https://github.com/satya164/react-native-tab-view，但我也已经从反应导航https://reactnavigation.org/docs/material-top-tab-navigator/中尝试了这个软件包，并且遇到了同样的问题。

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

简介

我正在实现一个具有三个场景的选项卡视图。第一个将是一个屏幕，该屏幕具有无限且分页的平面列表（其高度不确定），另外两个具有确定的高度的自己的视图。>

问题

当呈现第一个选项卡的内容时，其高度是好的，但是当呈现另一个选项卡且其高度大于第一个选项卡时，它（第一个选项卡）的高度会改变到另一个标签的高度。

第一个标签可以包含+100000个项目，但假设当前只有一个大小为30px的项目。第二个标签页的高度不可更改，高度为40px，最后一个标签页的高度为50px。

使用我当前的代码，会发生以下情况：

紫色空间不应该出现！

代码

由于代码很长，因此在相关部分中注释了“

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}
    />
  );

我认为问题是什么

我认为我必须使用onLayout和更新状态来明确获取平面列表的高度，但这会导致多个状态更新，并且会对性能产生很大影响。 必须使用另一种方法来处理此问题，我的意思是，一些css或flex属性（或其他属性）才能使第一个标签页的高度正确地适应其平面列表。

观察

如果第一个标签页的高度最大，则说明一切都完美，所有标签页的高度都应分别设置。

我尝试过的

我试图从动力学上获得FlatList的高度，但这太困难了，因为useState是异步的，并且当用户向Flatlist添加或删除一个项目时，不会调用onLayout属性...

有什么想法吗？非常感谢您的帮助。