React Native Android端TextInput自动聚焦后键盘不弹出问题求助

嘿，我之前也踩过这个和React Native Screens + React Navigation绑定的Android键盘坑，太懂这种光标明明在闪但键盘就是弹不出来的憋屈了！结合我自己的踩坑经验，给你几个可行的方案试试：

方案1：调整React Native Screens的软键盘模式配置 #

React Native Screens会默认修改Android的windowSoftInputMode参数，这很可能是导致键盘无法自动唤起的核心原因。你可以在导航容器的全局屏幕配置里强制设置合适的软键盘模式：

import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          // 针对Android设置软键盘模式，确保焦点变化时键盘自动唤起
          androidWindowSoftInputMode: 'stateVisible adjustResize',
        }}
      >
        {/* 你的页面组件 */}
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

如果是单独的Modal页面，也可以在对应Screen的options里单独设置这个属性，针对性更强。

方案2：用InteractionManager延迟触发聚焦 #

Android端Modal的渲染和焦点处理节奏比iOS慢，直接在componentDidMount或者useEffect里调用focus可能时机太早。试试在Modal的onShow事件里，等所有UI交互完成后再执行聚焦：

import { Modal, TextInput, InteractionManager, useRef } from 'react-native';

function MyModal({ visible, onClose }) {
  const inputRef = useRef(null);

  const handleModalShow = () => {
    // 等待UI渲染、动画等交互全部完成后再聚焦
    InteractionManager.runAfterInteractions(() => {
      if (inputRef.current) {
        inputRef.current.focus();
      }
    });
  };

  return (
    <Modal visible={visible} onShow={handleModalShow} animationType="slide">
      <TextInput
        ref={inputRef}
        autofocus={true}
        placeholder="输入内容..."
      />
    </Modal>
  );
}

方案3：手动调用Android原生API强制唤起键盘 #

如果上面的方法都没用，可以直接调用Android原生的输入法管理器来强制弹出键盘，这算是终极兜底方案了：

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

function MyModal({ visible, onClose }) {
  const inputRef = useRef(null);

  useEffect(() => {
    if (visible && Platform.OS === 'android') {
      const { InputMethodManager } = NativeModules;
      // 加个小延迟确保Modal视图完全挂载
      setTimeout(() => {
        if (inputRef.current) {
          inputRef.current.focus();
          // 手动触发键盘唤起
          InputMethodManager.showSoftInput(inputRef.current, 0);
        }
      }, 200);
    }
  }, [visible]);

  return (
    <Modal visible={visible} animationType="slide">
      <TextInput
        ref={inputRef}
        autofocus={true}
        placeholder="输入内容..."
      />
    </Modal>
  );
}

这里的延迟时间可以根据你的Modal动画时长调整，确保视图完全渲染后再执行操作。

额外排查项 #

• 确保你的react-native-screens和@react-navigation系列依赖是最新版本，旧版本确实存在不少键盘相关的已知bug；
• 如果Modal设置了transparent={true}，可以暂时去掉这个属性试试，透明Modal在Android上偶尔会出现焦点穿透或键盘唤起异常的问题；
• 检查是否有自定义的手势处理、焦点拦截逻辑干扰了TextInput的键盘唤起流程。

希望这些方案能帮你解决问题！

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