React Native中如何避免react-navigation页面导航时Logo图片重渲染闪烁

问题根因 #

你当前的核心问题并非React.memo失效，而是每个页面独立维护Header组件，导航切换时整个Header实例会被销毁后重新挂载：React.memo仅能阻止同一个组件实例的不必要重渲染，对新实例的首次渲染完全无干预能力。另外Logo组件内部的静态资源引入写在函数作用域内，也存在不必要的重复执行开销，会加重闪烁表现。

优化方案 #

方案1：全局统一配置公共Header（最优解） #

在导航器的根配置中统一设置Header，所有页面共用同一个Header实例，从根源避免切换页面时Header销毁重建：

// 导航器配置示例（以@react-navigation/native-stack为例）
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import CustomHeader from './Header';

const Stack = createNativeStackNavigator();

function AppNavigator() {
  return (
    <Stack.Navigator
      screenOptions={{
        // 全局统一挂载Header，所有页面共用同一个实例
        header: (props) => <CustomHeader {...props} />,
      }}
    >
      {/* 你的各个页面配置 */}
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Detail" component={DetailScreen} />
    </Stack.Navigator>
  );
}

如果不同页面需要自定义Header的按钮、标题等内容，可通过navigation.setOptions或者单个页面的screenOptions配置对应字段，公共的Logo、背景等全局逻辑统一放在公共Header中，完全不会受单页面重渲染的影响。

方案2：Logo组件全局悬浮挂载 #

如果页面Header定制化需求极高，无法抽离统一公共Header，可以把Logo组件单独抽离，直接挂载在App根节点，层级高于所有路由页面，用全局状态（如Context、Zustand等）控制opacity、显隐等属性，和页面组件的渲染逻辑完全隔离，不管页面怎么切换，Logo永远只会初始化一次，不会出现闪烁。

方案3：优化现有Logo组件配置 #

如果暂时不调整整体结构，可以先做以下优化降低重渲染开销：

• 把静态资源的require提到组件外部，全局只执行一次，避免每次组件渲染重复引入资源
• 给React.memo添加自定义比较函数，明确只有opacity属性变化时才允许重渲染

优化后的Logo代码：

// 静态资源引入提到组件外部，全局仅执行一次
const HEADER_LOGO_SRC = require('../assets/header-logo.png');

const Logo = ({opacity}) => {
  return (
    <Image
      source={HEADER_LOGO_SRC}
      resizeMode="contain"
      style={[styles.bigLogo, {opacity}]}
    />
  );
};

Logo.whyDidYouRender = true;
// 添加自定义比较逻辑，仅opacity变化时才重渲染
const LogoMemo = React.memo(Logo, (prevProps, nextProps) => {
  return prevProps.opacity === nextProps.opacity;
});

内容的提问来源于stack exchange，提问作者ינון רחמים