Expo React Native：连接物理键盘/扫码器时强制显示虚拟键盘

针对iOS和Android平台，分别采用原生级别的解决方案，绕过系统默认的外接键盘优先级设置：

Android 端解决方法 #

利用Android原生InputMethodManager强制唤起软键盘，在TextInput获焦时触发：

1. 导入所需模块：

import { NativeModules, findNodeHandle, Platform, TextInput } from 'react-native';
import { useRef } from 'react';

2. 定义强制唤起键盘的函数：

const forceShowAndroidKeyboard = (inputRef) => {
  const { InputMethodManager } = NativeModules;
  const viewId = findNodeHandle(inputRef.current);
  // FLAG_FORCE_IME_ACTIVE 标记强制唤起软键盘
  InputMethodManager.showSoftInput(viewId, 1);
};

3. 在TextInput组件中使用：

const inputRef = useRef(null);

<TextInput
  ref={inputRef}
  onFocus={() => {
    if (Platform.OS === 'android') {
      forceShowAndroidKeyboard(inputRef);
    }
  }}
  // 其他自定义属性（如placeholder、style等）
/>

iOS 端解决方法 #

通过修改TextInput的原生inputView属性为null，强制系统启用虚拟键盘：

1. 导入所需模块：

import { UIManager, findNodeHandle, Platform, TextInput } from 'react-native';
import { useRef } from 'react';

2. 定义强制唤起键盘的函数：

const forceShowIOSKeyboard = (inputRef) => {
  const viewId = findNodeHandle(inputRef.current);
  // 调用原生命令设置inputView为null
  UIManager.dispatchViewManagerCommand(
    viewId,
    UIManager.getViewManagerConfig('RCTTextField').Commands.setInputView,
    [null]
  );
  // 重新触发焦点确保键盘弹出
  inputRef.current.focus();
};

3. 在TextInput组件中使用：

const inputRef = useRef(null);

<TextInput
  ref={inputRef}
  onFocus={() => {
    if (Platform.OS === 'ios') {
      forceShowIOSKeyboard(inputRef);
    }
  }}
  // 其他自定义属性
/>

跨平台整合示例 #

将两个平台的逻辑合并，实现统一处理：

import { NativeModules, UIManager, findNodeHandle, Platform, TextInput } from 'react-native';
import { useRef } from 'react';

const AppInput = () => {
  const inputRef = useRef(null);

  const forceShowKeyboard = () => {
    if (Platform.OS === 'android') {
      const { InputMethodManager } = NativeModules;
      const viewId = findNodeHandle(inputRef.current);
      InputMethodManager.showSoftInput(viewId, 1);
    } else if (Platform.OS === 'ios') {
      const viewId = findNodeHandle(inputRef.current);
      UIManager.dispatchViewManagerCommand(
        viewId,
        UIManager.getViewManagerConfig('RCTTextField').Commands.setInputView,
        [null]
      );
      inputRef.current.focus();
    }
  };

  return (
    <TextInput
      ref={inputRef}
      onFocus={forceShowKeyboard}
      placeholder="扫码或手动输入"
      style={{ borderWidth: 1, padding: 10, margin: 20 }}
    />
  );
};

export default AppInput;

注意事项 #

• 确保Expo项目依赖最新版react-native，避免模块兼容性问题。
• Android端若NativeModules.InputMethodManager不可用，可搭配expo-keyboard的Keyboard.show()双重触发。
• iOS端部分设备可能需要延迟调用focus()，可添加setTimeout(() => inputRef.current.focus(), 100)调整时机。

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