React Native抽屉导航：如何控制页面切换时的组件卸载与重渲染？

1. 移除unmountOnBlur: true配置 #

这个属性会让页面一失焦就自动卸载，这正是从C返回B时B会重新挂载的根本原因，必须先去掉这个配置，让B页面在跳转到C时保持挂载状态。

2. 通过导航参数标记来源页面 #

从A页面跳转到B页面时，带上专属参数做标记：

// A页面跳转B的代码
props.navigation.navigate('B', { fromPage: 'A' });

3. 在B页面的focus事件里判断来源再执行刷新 #

在B页面中，结合focus事件和导航参数，只在从A页面过来时加载新数据：

import { useEffect } from 'react';

// B页面组件内
useEffect(() => {
  const unsubscribe = props.navigation.addListener('focus', () => {
    const { fromPage } = props.route.params || {};
    if (fromPage === 'A') {
      // 这里写加载新数据的逻辑
      loadNewData();
      // 可选：清除参数，避免后续从其他页面返回时误触发
      props.navigation.setParams({ fromPage: undefined });
    }
  });

  // 组件卸载时取消监听
  return unsubscribe;
}, [props.navigation, props.route.params]);

另一种方式：通过导航栈历史判断来源 #

如果不想传参数，也可以直接读取导航栈的历史记录判断上一个页面：

useEffect(() => {
  const unsubscribe = props.navigation.addListener('focus', () => {
    const navState = props.navigation.getState();
    // 取导航栈中前一个页面的名称
    const prevRoute = navState.routes[navState.index - 1];
    if (prevRoute?.name === 'A') {
      loadNewData();
    }
  });

  return unsubscribe;
}, [props.navigation]);

这样设置后，从C返回B时，B页面不会重新挂载，focus事件触发时判断来源不是A，就不会执行加载逻辑；只有从A跳转B时，才会触发数据刷新。

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