React Native Tab视图的高度始终等于最高选项卡的高度 [英] React Native Tab view always has the height equal to height of the highest tab

问题描述

我有一个FlatList在其页脚中呈现一个Tab视图.此选项卡视图使用户可以在一个FlatList或另一个FlatList之间切换.因此，这些最后一个是同级FlatList.

I have a FlatList that renders a Tab View in its footer. This Tab View let the user switch between one FlatList or an other. So, these last are sibling FlatLists.

第一个FlatList"A"具有比第二个"B"更大的高度.当我选择第二个列表时，其高度与"A"列表的高度相同. FlatList的.

The first FlatList "A" has a greater height than the second one "B". When I choose the second list, its height is the same as the "A" FlatList's one.

我已经在小吃中重现了该问题，代码.我认识到代码有点长，但太简单了，只关注父级FlatList(在App组件中)和在每个选项卡中呈现的两个FlatList(在代码末尾)

I have reproduced the problem in a snack where you can see a similar code. I recognize that the code is a little long but too simple, just focus only on the parent FlatList (in the App component) and the two FlatLists that are rendered in each tab (at the end of the code)

任何想法如何解决此问题?我不知道问题出在样式上，还是我需要做其他事情来完成这项工作(所有平面图必须具有自己的高度，而不是更大的高度).

Any ideas how to solve this issue? I don't know if the problem is in the styles or if I have to do something else to make this work (all flatlists have to have their own height, not the greater).

谢谢，非常感谢您的帮助.

Thank you, I would really appreciate your help.

推荐答案

我已经用解决方案更新了小吃！

I have updated the snack with the solution!

就像在小吃中实现自己的TabView一样，我决定使用库"react-native-tab-view"实现相同的解决方案，因为它是目前最适合本机响应的选项卡.

As in the snack I implemented my own TabView, I have decided to implement the same solution with the library "react-native-tab-view", as it is the best tab for react native for now.

以为有些人会有问题能够解决它.

Think that some people having this issue will be able to solve it.

基本上，我们需要做的是动态地计算每个选项卡场景的高度，并使用onLayout属性将其传递给TabView的样式.

Basically, what we need to do is to dinamically calculate the height of each tab scene and pass it to the style of the TabView using the onLayout prop.

就像这样:

 const renderScene = ({ route }) => {
    switch (route.key) {
      case "inifiniteScrollFlatList":
        return (
          <FirstRoute />
        );
      case "rawDataFlatList":
        return (
          <View
            onLayout={(event) => setTab1Height(event.nativeEvent.layout.height + TAB_HEIGHT)}
          >
            <SecondRoute />
          </View>
        );
      case "otherRawDataFlatList":
        return (
          <View
            onLayout={(event) => setTab2Height(event.nativeEvent.layout.height + TAB_HEIGHT)}
          >
            <ThirdRoute />
          </View>
        );
      default:
        return null;
    }
  };

  <TabView
      style={ index !== 0 && {
        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}
  />

Pd:您不应使用使用带有分页的无限滚动的选项卡来执行此操作.相反，您必须将height设置为null，以允许父FlatList自动获得其高度.

Pd: You shouldn't do this with a tab that uses an infinite scroll with pagination. Instead, you will have to set the height to null to allow the parent FlatList to automatically get its height.

这篇关于React Native Tab视图的高度始终等于最高选项卡的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！