Material Top Tabs Navigator嵌套ScrollView时页面无内容如何解决

问题根因 #

你遇到的问题是嵌套的ScrollView导致导航器无法获取有效高度导致的。@react-navigation/material-top-tabs的导航容器默认依赖父容器的宽高来渲染子页面，你当前的代码里有两层无固定高度的ScrollView包裹Tab导航：一层是Screen.js的外层ScrollView，另一层是TabNavigator.js自身外层的ScrollView。ScrollView默认的内容容器高度由子元素撑开，而Tab导航的子页面是用flex:1来占满父容器高度，父容器没有明确高度时flex:1会失效，所以子页面无法渲染。

解决步骤 #

• 移除TabNavigator.js中包裹导航器的外层ScrollView，替换为普通View组件，导航器自带子页面滑动能力，不需要额外套ScrollView
• 给Tab导航的外层容器设置明确的高度：可以通过Dimensions获取屏幕高度减去顶部其他元素的高度，也可以根据业务需求直接指定固定高度
• 如果你的业务不需要整个页面（包含顶部背景图）滚动，可以直接把Screen.js的外层ScrollView替换为带flex:1的View，此时不需要给Tab导航指定固定高度，flex布局会自动分配剩余高度

修改后的代码示例 #

TabNavigator.js #

import {Text, View, Dimensions} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';

// 动态计算Tab容器高度，可根据实际顶部元素高度调整
const { height: screenHeight } = Dimensions.get('window');
const TOP_ELEMENT_HEIGHT = 250; // 顶部背景图、导航栏等元素的总高度，自行修改
const tabContainerHeight = screenHeight - TOP_ELEMENT_HEIGHT;

function FeedScreen() {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Feed!</Text>
    </View>
  );
}

function NotificationsScreen() {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'red',
      }}>
      <Text>Notifications!</Text>
    </View>
  );
}

const Tab = createMaterialTopTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator
      initialRouteName="Feed"
      screenOptions={{
        tabBarActiveTintColor: '#e91e63',
        tabBarLabelStyle: {fontSize: 12},
        tabBarStyle: {backgroundColor: 'powderblue'},
      }}>
      <Tab.Screen
        name="Feed"
        component={FeedScreen}
        options={{tabBarLabel: 'Home'}}
      />
      <Tab.Screen
        name="Notifications"
        component={NotificationsScreen}
        options={{tabBarLabel: 'Updates'}}
      />
    </Tab.Navigator>
  );
}

export default function TabNavigator(props) {
  return (
    <View style={{height: tabContainerHeight, backgroundColor: 'white'}}>
      <NavigationContainer independent={true} style={{flex: 1}}>
        <MyTabs />
      </NavigationContainer>
    </View>
  );
}

不需要整页滚动时的Screen.js #

import {
  ImageBackground,
  View,
} from 'react-native';
import {widthPercentageToDP as wp} from 'react-native-responsive-screen';
import {
  profileBackground,
  leftIcon,
} from '../../Assets/Image';
import {IconButton} from 'react-native-paper';
import TabNavigator from './TabNavigator';

export default function (props) {
  return (
      <View style={{flex: 1, backgroundColor: 'white'}}>
        <ImageBackground style={{width: wp(100), height: 200}} source={profileBackground}>
          <IconButton
            icon={leftIcon}
            onPress={() => {
              props.navigation.goBack();
            }}
          />
        </ImageBackground>
        
        <View style={{flex:1, marginTop: 20, marginHorizontal: 20}}>
          <TabNavigator />
        </View>
      </View>
  );
}

注意事项 #

• 不要给导航器嵌套多层无固定高度的可滚动容器，ScrollView的子元素无法通过flex:1自动获取高度，必须明确指定高度才能让导航器正常渲染子页面
• 如果必须保留外层ScrollView实现整页滚动，需要准确计算Tab导航需要的高度赋值给外层容器，不要依赖flex布局

内容的提问来源于stack exchange，提问作者r_rj