@react-navigation/native中navigation.navigate()在iOS16.4+重复跳转刷新页面求助

问题详情 #

我使用 @react-navigation/native 的 useNavigation() 钩子时碰到了iOS特有的异常：

const navigation = useNavigation();
// 首次跳转正常
navigation.navigate('Home');

从Home页面调用 navigation.navigate('SomeRandomPage') 跳转到其他页面后，再次调用 navigation.navigate('Home') 返回首页时，页面会触发全量刷新，而非预期的平滑跳转。这个问题仅在iOS 16.4及以上版本出现，低版本iOS和Android平台均无此异常。

可行解决方案 #

1. 用 popToTop() 替代 navigate('Home') #

如果Home是导航栈的根页面，直接调用 popToTop() 可以回到栈顶的Home实例，不会触发重新渲染，保持平滑跳转：

navigation.popToTop();

2. 避免重复导航到当前栈顶页面 #

在调用 navigate 前先判断目标页面是否已经是当前栈的顶部，跳过不必要的导航操作：

const route = useRoute();
if (route.name !== 'Home') {
  navigation.navigate('Home');
}

3. 升级React Navigation依赖版本 #

该问题大概率是React Navigation与iOS 16.4+的兼容性bug，尝试升级到最新版的导航库及相关依赖，官方可能已修复该问题：

npm update @react-navigation/native @react-navigation/stack
# 或使用yarn
yarn upgrade @react-navigation/native @react-navigation/stack

4. 关闭iOS 16.4+的非活跃屏幕卸载 #

iOS 16.4+中，React Navigation默认的detachInactiveScreens行为可能导致页面被卸载后重新渲染，可针对性关闭该配置：

import { Platform } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function AppNavigator() {
  return (
    <Stack.Navigator
      screenOptions={{
        detachInactiveScreens: Platform.OS === 'ios' && Platform.Version >= 16.4 ? false : undefined,
      }}
    >
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="SomeRandomPage" component={SomeRandomPageScreen} />
    </Stack.Navigator>
  );
}

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