Expo JS应用iOS端按r键自动刷新，如何禁用该功能？

问题原因 #

Expo SDK 46/47的开发模式下，默认将键盘的r键绑定为应用全局刷新快捷键。即使焦点处于输入框内，这个全局键盘监听依然会捕获r键事件，触发应用刷新，导致输入内容时的异常行为。

解决方案 #

方法一：禁用开发模式下的全局键盘快捷键 #

在项目的app.json（或app.config.js）中添加devLauncher配置，直接禁用所有开发服务器的键盘快捷键：

{
  "expo": {
    // 其他原有配置
    "packagerOpts": {
      "devLauncher": {
        "disableKeyboardShortcuts": true
      }
    }
  }
}

修改后重启开发服务器即可生效。此方法会禁用所有开发快捷键（如r刷新、d打开开发者菜单等），适合不需要使用快捷键的场景。

方法二：仅过滤r键的刷新触发 #

如果需要保留其他开发快捷键，可以在根组件中添加逻辑，仅在键盘激活（输入框聚焦）时拦截r键的刷新事件：

import { useEffect } from 'react';
import { Keyboard } from 'react-native';

export default function App() {
  useEffect(() => {
    let originalHandler = null;

    const handleKeyboardShow = () => {
      if (__DEV__) {
        // 保存原始的快捷键处理函数
        originalHandler = global.__expoDevLauncherKeyboardHandler;
        if (originalHandler) {
          // 重写处理函数，忽略r键事件
          global.__expoDevLauncherKeyboardHandler = (event) => {
            if (event.key !== 'r') {
              originalHandler(event);
            }
          };
        }
      }
    };

    const handleKeyboardHide = () => {
      if (__DEV__ && originalHandler) {
        // 恢复原始的快捷键处理函数
        global.__expoDevLauncherKeyboardHandler = originalHandler;
        originalHandler = null;
      }
    };

    const showListener = Keyboard.addListener('keyboardDidShow', handleKeyboardShow);
    const hideListener = Keyboard.addListener('keyboardDidHide', handleKeyboardHide);

    return () => {
      showListener.remove();
      hideListener.remove();
    };
  }, []);

  // 应用原有组件逻辑
  return (
    // ...
  );
}

此方法只会在输入框激活时阻止r键触发刷新，不影响其他快捷键的使用。

补充说明 #

该问题仅存在于开发模式下，生产环境构建的应用不会加载开发服务器的快捷键监听，因此无需额外处理。

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