如何让react-navigation的navigation.goBack操作优先立即执行？

const goBackAction = () => { navigation.goBack(null); };
headerOptions.headerLeft = () =>

return (<HeaderBackButton onPress={goBackAction} />)

现在遇到的问题是：当App繁忙时，`navigation.goBack(null)`会延迟1-2秒，导致糟糕的用户体验。请问是否可以让该操作获得优先执行权，使其立即响应？

---

## 解决方案
我之前也碰到过几乎一模一样的场景，JS线程被大量桥接数据阻塞时，react-navigation的路由操作确实会被卡住。这里给你几个实用的解决思路，按实现成本和效果排序：

### 1. 结合`BackHandler`绕开JS线程阻塞（最推荐）
`navigation.goBack()`本质是在JS线程处理路由状态更新，一旦JS线程被占满，自然会排队等待。而React Native提供的`BackHandler`可以直接触发Native层的返回逻辑，不受JS线程阻塞影响。

你可以修改返回按钮的 onPress 逻辑，同时兼顾路由栈同步和即时响应：
```javascript
import { BackHandler } from 'react-native';
import { HeaderBackButton } from 'react-navigation-stack';
...

const goBackAction = () => {
  // 先确认路由栈确实有上一页
  const canGoBack = navigation.canGoBack();
  if (canGoBack) {
    // 用setImmediate让react-navigation的路由更新插队执行
    setImmediate(() => {
      navigation.goBack(null);
    });
    // 直接触发Native返回，确保UI立刻响应
    BackHandler.back();
  }
};

headerOptions.headerLeft = () => <HeaderBackButton onPress={goBackAction} />;
...

这里的关键是BackHandler.back()会立刻让Native执行返回动画和页面切换，而setImmediate则会让JS端的路由栈更新插队到当前任务队列的前面，尽量保证Native和JS的路由状态同步。

2. 让goBack操作插队到JS任务队列前端 #

如果不想依赖Native API，也可以通过setImmediate或者requestAnimationFrame提升navigation.goBack()的执行优先级：

const goBackAction = () => {
  // setImmediate会让回调在当前事件循环的I/O操作后执行，优先级高于普通任务
  setImmediate(() => {
    navigation.goBack(null);
  });
};

这个方法能减少延迟，但如果JS线程被完全阻塞（比如在处理大量同步计算），还是会有延迟，不如第一种方法彻底。

3. 自定义Native返回组件（彻底绕开JS线程） #

如果上面的方法还是达不到你的要求，可以直接写一个Native的返回按钮组件，通过Native模块直接触发react-navigation的Native路由更新，完全绕过JS线程。

大致步骤是：

• 在iOS/Android端分别实现一个返回按钮的Native组件
• 写一个Native模块，提供triggerGoBack方法，直接调用react-navigation的Native路由管理器执行返回操作
• 在JS端引入这个自定义组件， onPress 时调用Native模块的方法

这个方案能保证返回操作100%即时响应，但需要写Native代码，实现成本稍高。

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