Expo RN ScrollView内嵌material-top-tab-navigator页面不显示

相关版本 #

• @react-navigation/material-top-tabs: ^6.2.1
• expo: ^45.0.0

问题描述 #

直接将Top Tabs导航组件嵌套在垂直ScrollView内时，不给导航器设置固定高度就无法渲染出页面内容；设置固定高度后，标签页内部内容无法滚动，高度无法适配当前激活标签的内容尺寸，无法实现页面整体滚动效果。
核心诉求：实现ScrollView内的标签页正常渲染，高度自适应内部内容，同时支持整页滚动。 #

问题复现代码 #

加载导航器的页面代码 #

return (
 <View>
      <ScrollView >
       <View>
         <TitleH2 color={colors.white} style={{marginHorizontal:20, marginBottom:20}}>Ervaringen in gebied</TitleH2>
        </View>
         <View >
            <DestinationTabs/>
         </View>
   </ScrollView>
</View> 
)

导航器定义代码 #

return (
    <Tab.Navigator 
      screenOptions={{
          tabBarIndicatorStyle:{ backgroundColor:colors.green_500, },
          tabBarActiveTintColor: colors.green_500,
          tabBarScrollEnabled: true,
          lazy: true,
      }}
      sceneContainerStyle={{
          backgroundColor: colors.green_500,
      }}
    > 
      <Tab.Screen name="Tab1" component={TabSceen1}  />
      <Tab.Screen name="Tab2" component={TabSceen1} />
      <Tab.Screen name="Tab3" component={TabSceen1} />
      <Tab.Screen name="Tab4" component={TabSceen2} />
    </Tab.Navigator>
);

原因说明 #

material-top-tabs底层基于react-native-tab-view实现，默认垂直方向会占满父容器的全部可用高度。当它被放在垂直ScrollView内部时，垂直方向没有明确的高度约束，组件初始化时会被计算为0高度，自然无法显示内容。 #

可行方案 #

方案1：实现整页统一滚动（标签栏不吸顶，随页面整体滚动） #

通过动态测量当前激活标签的内容高度，给Tab导航器外层设置对应高度，同时关闭导航器默认的flex占满逻辑即可。

1. 给Tab.Navigator添加配置pagerStyle={{ flex: undefined }}，取消默认的高度撑满逻辑
2. 用ref存储每个标签页的内容高度，通过onLayout回调在标签页渲染完成后测量实际内容高度
3. 监听标签切换事件，切换标签时动态更新导航器外层容器的高度为当前标签的内容高度
   参考实现：

import { useState, useRef } from 'react';
import { View, ScrollView } from 'react-native';
// 其他原有导入保持不变

const PageContainTabs = () => {
  // 当前激活标签对应高度
  const [activeTabHeight, setActiveTabHeight] = useState(0);
  // 当前激活标签索引
  const [currentIndex, setCurrentIndex] = useState(0);
  // 存储所有标签的内容高度
  const tabContentHeights = useRef(new Array(4).fill(0)).current;

  // 高度测量通用方法
  const measureTabHeight = (index, layoutHeight) => {
    tabContentHeights[index] = layoutHeight;
    // 仅更新当前激活标签的容器高度
    if (index === currentIndex) {
      setActiveTabHeight(layoutHeight);
    }
  };

  return (
    <View>
      <ScrollView>
        <View>
          <TitleH2 color={colors.white} style={{marginHorizontal:20, marginBottom:20}}>Ervaringen in gebied</TitleH2>
        </View>
        {/* 动态设置导航器外层容器高度 */}
        <View style={{ height: activeTabHeight }}>
          <Tab.Navigator 
            screenOptions={{
                tabBarIndicatorStyle:{ backgroundColor:colors.green_500 },
                tabBarActiveTintColor: colors.green_500,
                tabBarScrollEnabled: true,
                lazy: true,
            }}
            sceneContainerStyle={{
                backgroundColor: colors.green_500,
            }}
            // 关闭默认flex撑满
            pagerStyle={{ flex: undefined }}
            // 监听标签切换
            onIndexChange={(index) => {
              setCurrentIndex(index);
              setActiveTabHeight(tabContentHeights[index]);
            }}
          > 
            <Tab.Screen name="Tab1">
              {() => (
                <View onLayout={(e) => measureTabHeight(0, e.nativeEvent.layout.height)}>
                  <TabSceen1 />
                </View>
              )}
            </Tab.Screen>
            <Tab.Screen name="Tab2">
              {() => (
                <View onLayout={(e) => measureTabHeight(1, e.nativeEvent.layout.height)}>
                  <TabSceen1 />
                </View>
              )}
            </Tab.Screen>
            <Tab.Screen name="Tab3">
              {() => (
                <View onLayout={(e) => measureTabHeight(2, e.nativeEvent.layout.height)}>
                  <TabSceen1 />
                </View>
              )}
            </Tab.Screen>
            <Tab.Screen name="Tab4">
              {() => (
                <View onLayout={(e) => measureTabHeight(3, e.nativeEvent.layout.height)}>
                  <TabSceen2 />
                </View>
              )}
            </Tab.Screen>
          </Tab.Navigator>
        </View>
      </ScrollView>
    </View> 
  )
}

注意：开启lazy懒加载时，未渲染过的标签首次激活后会自动触发onLayout测量高度，无需提前预加载所有标签内容。

方案2：实现标签栏吸顶效果 #

如果需要标签栏滚动到顶部后固定吸顶，不需要整页统一滚动，直接用FlatList/SectionList实现即可：将标题放在ListHeaderComponent中，Tab栏作为吸顶项，Tab内容区域作为列表主体，这种方案不需要手动测量高度，滚动性能更优。 #

内容的提问来源于stack exchange，提问作者Mika de Vries