React Native：TextInput组件键盘意外收起问题排查求助

可能的原因及对应解决方案 #

1. 函数引用变化导致组件重复渲染
   你的代码中，onFocus 传递的是一个每次组件渲染都会重新创建的箭头函数 () => handleFocus()，这可能会让 TextInput 识别为 props 变化，触发重新渲染进而丢失焦点、收起键盘。

   修复方式：将 handleFocus 移至组件内部，并用 useCallback 包裹以稳定函数引用：

   import React, { useCallback } from 'react';
   import { View, TextInput } from 'react-native';
   
   export default function MyComponent() {
     const handleFocus = useCallback(() => {
       console.log('Input field focused!');
       // 额外逻辑
     }, []);
   
     return (
       <View>
         <TextInput
           placeholder="Type something..."
           onFocus={handleFocus}
         />
       </View>
     );
   }
   

2. 全局键盘事件或第三方库干扰
   即使你排查过外部库，仍需确认是否存在全局键盘监听逻辑（比如 Keyboard.addListener），其中可能意外调用了 TextInput.blur() 或触发了导致焦点丢失的操作。可以临时移除所有全局键盘事件监听，测试问题是否消失。

3. 父组件事件拦截
   检查 TextInput 的父级 View 是否绑定了 onPress、onTouchStart 等事件，这些事件可能会在点击输入框时优先触发，干扰 TextInput 的焦点获取。如果存在此类事件，可尝试移除或添加 stopPropagation() 阻止事件冒泡。

4. 平台配置异常

   • Android：检查 AndroidManifest.xml 中的 windowSoftInputMode 设置，避免使用可能导致布局剧烈变化的配置（比如 adjustPan 搭配不当），推荐使用 adjustResize。
   • iOS：检查 Info.plist 中是否存在与键盘行为相关的异常配置，比如强制隐藏键盘的设置。

调试步骤 #

• 在 TextInput 上添加 onBlur 日志，确认焦点丢失的时机：

  <TextInput
    placeholder="Type something..."
    onFocus={handleFocus}
    onBlur={() => console.log('Input blurred unexpectedly!')}
  />
  

• 使用 React DevTools 查看组件渲染次数，确认聚焦时是否存在不必要的重复渲染。
• 临时移除 handleFocus 中的所有逻辑，仅保留 console.log，测试键盘是否仍会收起，以排除逻辑本身的问题。

内容的提问来源于stack exchange，提问作者André Silverio Silva