React Native Android端底部Tab导航器初始加载跳动问题求助

问题描述 #

在Android端开发React Native应用时，底部Tab导航器及图标在App初始加载阶段出现跳动现象。当前导航结构为Drawer导航器作为父容器并使用其Header，子容器的底部Tab导航器已通过headerShown: false隐藏自身Header。

已尝试但无效的方案：

• 用insets全设为0的SafeAreaProvider包裹整个App
• 用SafeAreaView包裹Tab导航器
• 按照Git社区建议降级react-native-screens至3.13版本

相关代码 #

Drawer导航器代码

<Drawer.Navigator
  drawerContent={props => <DrawerContent {...props} />}
  screenOptions={({navigation, route}) => ({
    headerTitle: '',
    unmountOnBlur: true,
    headerStyle: {
      borderBottomWidth: 1,
      borderBottomColor: Color.borderPrimary,
    },
    headerLeft: () => (
      <TouchableOpacity
        onPress={() => navigation.navigate('HomeTabNavigator')}>
        <CustomImage
          width={37}
          height={34}
          source={logo}
        />
      </TouchableOpacity>
    ),
    headerRight: () => (
      <DrawerToggleButton
        onPress={() => navigation.toggleDrawer()}
      />
    ),
  })}>
  <Drawer.Screen
    name="HomeTabNavigator"
    component={HomeTabNavigator}
    options={{drawerLabel: 'home'}}
  />
</Drawer.Navigator>

HomeTabNavigator代码

<Tab.Navigator
    screenOptions={({route}) => ({
      headerShown: false,
      tabBarLabel: route.name,
      tabBarIcon: ({color}) => {
        return (
          <CustomImage
            width={25}
            height={25}
            tintColor={color}
            source={filterHomeTabImages(route.name)}
          />
        );
      },
      tabBarStyle: {
        height: 55,
      },
    })}>

依赖版本 #

"@react-navigation/drawer": "6.5.1",
"@react-navigation/bottom-tabs": "6.4.1",
"@react-navigation/native": "6.0.13",
"@react-navigation/stack": "6.3.2",
"react-native-screens": "3.17.0",

可行解决方案 #

1. 固定Tab导航器的布局位置与样式 #

Android端初始加载时的布局计算延迟是常见诱因，给Tab导航器设置绝对定位固定底部位置，提前定义边框等样式避免加载时突变：

import { View } from 'react-native';

function HomeTabNavigator() {
  return (
    <View style={{ flex: 1 }}>
      <Tab.Navigator
        screenOptions={({route}) => ({
          headerShown: false,
          tabBarLabel: route.name,
          tabBarIcon: ({color}) => {
            return (
              <CustomImage
                width={25}
                height={25}
                tintColor={color}
                source={filterHomeTabImages(route.name)}
              />
            );
          },
          tabBarStyle: {
            height: 55,
            position: 'absolute',
            bottom: 0,
            left: 0,
            right: 0,
            borderTopWidth: 1,
            borderTopColor: '#e0e0e0', // 提前设置边框颜色
          },
        })}>
        {/* 你的Tab.Screen项 */}
      </Tab.Navigator>
    </View>
  );
}

2. 预加载Tab图标资源 #

图标加载延迟会导致Tab布局跳动，在App启动或Tab组件挂载时预加载所有图标资源：

import { Image, useEffect } from 'react-native';

// 整理所有Tab使用的图标资源
const tabIconResources = [
  require('./assets/tab-home.png'),
  require('./assets/tab-profile.png'),
  // 其他Tab图标
];

function HomeTabNavigator() {
  useEffect(() => {
    // 预加载所有图标
    tabIconResources.forEach(res => {
      Image.prefetch(res);
    });
  }, []);

  return (
    {/* 原Tab.Navigator代码 */}
  );
}

3. 调整Drawer导航器的unmountOnBlur配置 #

当前Drawer设置了unmountOnBlur: true，会导致Tab导航器在切换时被卸载，重新加载时易出现跳动，尝试改为false：

screenOptions={({navigation, route}) => ({
  // ...其他配置
  unmountOnBlur: false,
})}

4. 禁用react-native-screens原生优化（极端方案） #

若上述方法均无效，可尝试禁用react-native-screens的原生屏幕优化，改用纯JS实现导航（注意：会影响导航性能，仅作为最后尝试）：

// 在App入口文件顶部添加
import { enableScreens } from 'react-native-screens';
enableScreens(false);

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