如何解决React Native导航引发的内存占用持续增长问题？

问题分析 #

你的测试代码中存在几个直接导致内存泄漏的关键点：

• createStackNavigator() 在App组件内部声明，每次App渲染都会重新创建导航器实例，造成不必要的内存开销
• headerLeft 每次渲染都会生成新的Button组件实例，未做复用处理
• 频繁使用navigate会持续向栈中添加页面实例（即便开启detachInactiveScreens，栈的长度仍会不断增长）

具体解决方案 #

1. 将导航器实例移到组件外部 #

createStackNavigator() 是开销较大的操作，不应在组件内部重复执行。修改如下：

import React from "react";
import { Button, View } from "react-native";

import { enableScreens } from 'react-native-screens';
enableScreens();

import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { SafeAreaProvider } from 'react-native-safe-area-context';

import ScreenOne from "./src/screens/ScreenOne";
import ScreenTwo from "./src/screens/ScreenTwo";

// 移到App组件外部，仅创建一次
const Stack = createStackNavigator();

export default function App() {
  return (
    <SafeAreaProvider>
      <NavigationContainer>
        <Stack.Navigator detachInactiveScreens={true}>
          {/* 后续代码见下方优化 */}
        </Stack.Navigator>
      </NavigationContainer>
    </SafeAreaProvider>
  )
}

2. 优化headerLeft的组件复用 #

使用useCallback包裹导航逻辑，避免每次渲染生成新的组件实例：

export default function App() {
  // 用useCallback缓存导航逻辑，避免重复创建函数
  const goToScreenTwo = React.useCallback((navigation) => () => {
    navigation.setOptions({ headerLeft: undefined });
    // 用replace替代navigate，防止栈中积累重复页面
    navigation.replace("screen-2");
  }, []);

  const goToScreenOne = React.useCallback((navigation) => () => {
    navigation.setOptions({ headerLeft: undefined });
    navigation.replace("screen-1");
  }, []);

  return (
    <SafeAreaProvider>
      <NavigationContainer>
        <Stack.Navigator detachInactiveScreens={true}>
          <Stack.Screen 
            name="screen-1" 
            component={ScreenOne} 
            options={({ navigation }) => ({
              headerLeft: () => (
                <Button title="go to s2" onPress={goToScreenTwo(navigation)} />
              )
            })}
          />
          <Stack.Screen 
            name="screen-2" 
            component={ScreenTwo} 
            options={({ navigation }) => ({
              headerLeft: () => (
                <Button title="go to s1" onPress={goToScreenOne(navigation)} />
              )
            })}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </SafeAreaProvider>
  )
}

3. 确保屏幕组件正确卸载清理 #

检查ScreenOne和ScreenTwo组件，所有副作用（定时器、订阅、事件监听）必须在组件卸载时清理：

// 示例：ScreenOne.js
import React, { useEffect } from "react";
import { Text } from "react-native";

export default function ScreenOne() {
  useEffect(() => {
    const timer = setInterval(() => {
      // 模拟业务操作
    }, 1000);

    // 卸载时清理定时器
    return () => clearInterval(timer);
  }, []);

  return <Text>Screen One</Text>;
}

4. 限制栈的长度增长 #

如果不需要保留页面历史，始终使用navigation.replace替代navigate；若需保留部分历史，可在特定场景下用navigation.popToTop()回到栈顶，避免栈中积累大量页面实例。

5. 验证依赖兼容性 #

确保react-native-screens版本与React Native 0.77.1兼容，版本不匹配会导致detachInactiveScreens无法正常生效。

额外排查步骤 #

• 使用XCode的Memory Graph Debugger查看内存泄漏的具体对象，定位未被释放的组件实例
• 检查全局变量或第三方库是否持有组件引用，导致无法被垃圾回收

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