React Native Navigation栈页面过多致性能问题，求替代实现方案

针对你用navigation.push跳转同一页面导致栈堆积的问题，有以下几种更优的实现方式：

1. 用navigation.replace()替代push() #

replace会替换当前栈顶的页面，而不是新增页面到栈中，这样栈里始终只会有一个UserDetails页面，彻底避免堆积问题。

代码示例：

// 跳转到下一位用户时使用replace
navigation.replace('UserDetails', {id: id + 1})

2. 在当前页面直接更新参数（无需跳转） #

如果不需要保留返回上一位用户的功能，完全可以不用跳转页面，直接更新当前页面的参数并重新加载数据。通过navigation.setParams更新参数，再监听参数变化触发数据刷新。

代码示例：

import { useRoute, useNavigation } from '@react-navigation/native';
import { useFocusEffect } from '@react-navigation/native';
import React, { useState, useCallback } from 'react';

const UserDetails = () => {
  const route = useRoute();
  const navigation = useNavigation();
  const [user, setUser] = useState(null);

  // 模拟获取用户数据的函数
  const fetchUser = useCallback(async (userId) => {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    const data = await response.json();
    setUser(data);
  }, []);

  // 监听路由参数变化，重新获取用户数据
  useFocusEffect(
    useCallback(() => {
      fetchUser(route.params.id);
    }, [route.params.id, fetchUser])
  );

  // 切换到下一位用户的逻辑
  const goToNextUser = () => {
    const nextId = route.params.id + 1;
    navigation.setParams({ id: nextId });
  };

  return (
    // 页面渲染内容，比如显示用户名称、详情，以及触发goToNextUser的按钮
  );
};

3. 限制栈的长度（保留部分历史页面） #

如果需要允许返回最近几位用户的页面，可以在跳转时检查栈的长度，超过限制就重置栈，只保留指定数量的历史页面。

代码示例：

const goToNextUser = () => {
  const nextId = route.params.id + 1;
  const currentStack = navigation.getState().routes;
  
  // 保留最近1个UserDetails页面，加上新的页面，避免栈过长
  const keepRoutes = currentStack.filter(route => route.name !== 'UserDetails').concat(
    currentStack.filter(route => route.name === 'UserDetails').slice(-1)
  );

  navigation.reset({
    index: keepRoutes.length,
    routes: [...keepRoutes, { name: 'UserDetails', params: { id: nextId } }],
  });
};

根据你的实际需求选择即可：如果不需要返回历史用户，优先选前两种方式；如果需要保留部分历史，用第三种方式控制栈的长度。

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