React Native实现提交后保持屏幕键盘持续开启的方法

核心方案：设置blurOnSubmit={false} #

给TextInput添加blurOnSubmit={false}属性，这是解决问题的关键——触发提交操作（比如点击键盘搜索键、调用提交逻辑）时，输入框不会自动失去焦点，键盘也就不会收起。

示例代码：

import React, { useRef } from 'react';
import { View, TextInput, Button, Keyboard } from 'react-native';

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

  const handleSubmit = () => {
    // 这里写搜索/添加商品的业务逻辑
    console.log('执行搜索操作');
    // 如需清空输入框，直接修改state即可，无需额外聚焦
    // setSearchText('');
  };

  const manualDismissKeyboard = () => {
    // 提供手动关闭键盘的入口
    Keyboard.dismiss();
  };

  return (
    <View style={{ padding: 20, flex: 1 }}>
      <TextInput
        ref={inputRef}
        placeholder="输入商品名称"
        blurOnSubmit={false}
        onSubmitEditing={handleSubmit}
        style={{ borderWidth: 1, borderRadius: 4, padding: 10, marginBottom: 15 }}
      />
      <Button title="提交搜索" onPress={handleSubmit} />
      <Button 
        title="关闭键盘" 
        onPress={manualDismissKeyboard} 
        style={{ marginTop: 10 }} 
      />
    </View>
  );
};

export default SearchScreen;

处理外部提交按钮的焦点问题 #

如果提交按钮是独立于TextInput的外部组件，点击按钮默认会让输入框失焦。可以通过以下方式避免：

• 用TouchableWithoutFeedback包裹整个页面容器，设置keyboardShouldPersistTaps="handled"，确保点击按钮时输入框不会失焦：

import { TouchableWithoutFeedback } from 'react-native';

// ...
return (
  <TouchableWithoutFeedback onPress={() => {}} keyboardShouldPersistTaps="handled">
    <View style={{ padding: 20, flex: 1 }}>
      {/* TextInput 和 按钮组件 */}
    </View>
  </TouchableWithoutFeedback>
);

替代定时器方案的优势 #

你之前用定时器重新聚焦会导致键盘闪烁，本质是输入框先失焦收起键盘，再聚焦弹出。而blurOnSubmit={false}从根源上避免了失焦动作，彻底解决闪烁问题。

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