React Native TypeScript中TextInput输入时键盘立即关闭问题求解

一、内容无法显示问题修正 #

你目前的写法属于受控组件的不完整实现，仅绑定onChangeText未绑定value属性，使用defaultValue属于非受控组件的用法，和useState配合会出现状态不同步问题，正确的受控组件写法如下：

const [login, setLogin] = useState("");

<TextInput 
  style={styles.text} 
  value={login} // 必须绑定value属性和state关联
  onChangeText={setLogin} 
/>

修改后即可无需依赖defaultValue实现输入内容正常展示。

二、键盘自动关闭问题解决方案 #

该问题的核心原因是输入过程中TextInput组件被触发了卸载再重建，而非普通重渲染，常见触发场景和修复方案如下：

• 场景1：TextInput所在的子组件定义在父组件的渲染函数内部
  每次父组件因state更新重渲染时，内部定义的子组件引用会整体刷新，React会判定为新组件，卸载旧组件后挂载新组件，导致输入中断、键盘收起。
  修复方案：将子组件的定义移到父组件外部，若无需拆分组件可直接在父组件的return语句中写TextInput标签，不要在父组件内部封装自定义的输入组件。
• 场景2：TextInput或其上级容器绑定了动态变化的key属性
  React会通过key属性判定元素是否需要重建，若key每次渲染都生成新值（比如绑定了随机数、每次刷新的时间戳等），就会触发组件重建。
  修复方案：检查TextInput及其父节点的key属性，删除动态key，替换为固定不变的字符串即可。
• 场景3：TextInput放在ScrollView/FlatList等滚动容器内
  滚动容器默认的点击事件处理逻辑会收起键盘。
  修复方案：给滚动容器添加keyboardShouldPersistTaps="handled"属性即可。

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