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

问题描述

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

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.

第一个平面列表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.

我在 snack 中重现了该问题，您可以在其中看到类似的代码.我承认代码有点长但是太简单了，只关注父 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:您不应该对使用无限滚动和分页的选项卡执行此操作.相反，您必须将高度设置为 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 选项卡视图的高度始终等于最高选项卡的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！