时间戳

首页 > 解决方案 > React Native 选项卡视图的高度始终等于最高选项卡的高度

javascript - React Native 选项卡视图的高度始终等于最高选项卡的高度

问题描述

介绍

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

问题

第一个 FlatList“A”的高度大于第二个“B”。当我选择第二个列表时，它的高度与“A”FlatList 的高度相同。

我在小吃中重现了这个问题，您可以在其中看到类似的代码。我承认代码有点长但是太简单了，只关注父 FlatList（在 App 组件中）和每个选项卡中呈现的两个 FlatList（在代码末尾）

问题

任何想法如何解决这个问题？我不知道问题出在样式上，还是我必须做其他事情才能完成这项工作（所有平面列表都必须有自己的高度，而不是更大的高度）。

谢谢你，我真的很感谢你的帮助。

标签： javascriptcssreactjsreact-nativeexpo

解决方案

2022 年更新

  const renderScene = ({ route }) => {
    //
    //  Note: We are hidding tabs in order to avoid the
    // "FlexBox Equal Height Columns" typical problem
    //
    switch (route.key) {
      case "bitcoin":
        return (
          <View style={index !== 0 && styles.hidden}>
            <Bitcoin />
          </View>
        );

      case "ethereum":
        return (
          <View style={index !== 1 && styles.hidden}>
            <Etherum />
          </View>
        );

      case "rose":
        return (
          <View style={index !== 2 && styles.hidden}>
            <Rose />
          </View>
        );

      default:
        return null;
    }
  };


...

<TabView
  renderTabBar={renderTabBar}
  navigationState={{ index, routes }}
  renderScene={renderScene}
  onIndexChange={handleOnIndexChange}
  initialLayout={{ width: layout.width }}
  removeClippedSubviews={false}
  swipeEnabled
  swipeVelocityImpact={0.2}
  gestureHandlerProps={{
    activeOffsetX: [-30, 30], // To solve swipe problems on Android
  }}
  style={globalStyles.flexContainer}
/>

款式：

hidden: { display: "none" }

我已经用解决方案更新了零食！

正如在我实现自己的 TabView 的小吃中一样，我决定使用库“react-native-tab-view”实现相同的解决方案，因为它是目前反应原生的最佳选项卡。

认为有些人有这个问题将能够解决它。

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

像这样：

 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 自动获取其高度。

推荐阅读