如何在react-navigation栈内返回页面时避免触发页面重新加载

根因说明 #

你遇到的goBack触发页面重载、侧滑返回不触发的差异，绝大多数场景属于两类问题：

• 子页面返回时错误使用props.navigation.navigate('原页面路由')替代goBack，相当于重新入栈了新的原页面实例，自然会触发完整初始化重载
• 原页面的生命周期逻辑错误绑定了代码返回触发的事件，或是导航配置开启了页面失焦自动卸载的参数

解决方案 #

修正返回调用逻辑 #

子页面返回优先用goBack，不要手动指定路由跳转：

// 子页面返回按钮正确写法
<Button onPress={() => props.navigation.goBack()} title="返回" />

如果需要退回到栈内指定层级的页面，用pop方法指定回退步数：

// 示例：退回2步到目标页面，不会创建新页面实例
props.navigation.pop(2)

优化原页面刷新逻辑 #

如果你在原页面的focus监听中触发了数据加载，可以通过标记位控制是否需要重载：

import { useFocusEffect } from '@react-navigation/native';
import { useRef } from 'react';

const YourPage = () => {
  // 标记是否需要执行重载逻辑
  const needReload = useRef(false);

  // 只有跳转到需要返回刷新的页面时，才将标记位设为true
  const toSubPage = () => {
    // needReload.current = true;
    props.navigation.navigate("subscreen");
  }

  useFocusEffect(
    React.useCallback(() => {
      // 仅标记为需要重载时才执行加载逻辑
      if (needReload.current) {
        // 你的页面重载逻辑，比如请求接口
        fetchPageData();
        needReload.current = false;
      }
    }, [])
  );
}

修正导航栈配置 #

检查你的栈导航配置，确认目标页面没有开启失焦卸载的参数：

<Stack.Screen 
  name="YourPageRoute" 
  component={YourPage} 
  // 移除下方这类会导致页面卸载的配置
  // unmountOnBlur: true
/>

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