iOS端Chrome中React Native的TextInput Done按钮无法触发onSubmitEditing

在iOS设备的Chrome浏览器中访问React Native站点时，TextInput组件键盘上方的“Done”按钮无法触发onSubmitEditing事件，仅右下角的Enter键有效；但在Safari浏览器中，两个按钮都能正常触发该事件。尝试添加多种onXXX触发事件后，iOS Chrome中的Done按钮仍无响应。注：handleBlur函数用于设置键盘状态（setKeyVisable(false)），以此控制页面是否缩放，避免键盘激活时页面重调尺寸。

解决方案 #

• 给TextInput添加returnKeyType="done"属性，明确指定返回键类型为Done，帮助Chrome识别该按钮的触发逻辑
• 结合onEndEditing事件作为兜底，因为Done按钮在部分浏览器环境中会触发onEndEditing而非onSubmitEditing，同时监听两个事件来执行handleBlur逻辑
• 保持multiline={false}的设置，多行输入的键盘行为逻辑会与单行存在差异

修改后的代码示例 #

<TextInput 
   ref={inputRef}
   style={styles.SearchInputMob} 
   multiline={false}
   returnKeyType="done" // 明确指定返回键类型
   placeholder="Keyword..."
   placeholderTextColor='grey'
   onFocus={()=>setKeyVisable(true)}
   onBlur={()=>handleBlur()}
   onSubmitEditing={()=>handleBlur()}
   onEndEditing={()=>handleBlur()} // 兜底监听Done按钮触发
   onChangeText={handleInputChange}
   value={searchText}
/>

额外补充 #

如果上述方案仍未解决问题，可尝试通过ref手动控制失焦：在onEndEditing中调用inputRef.current?.blur()，确保键盘正常收起并触发状态更新。

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