React Native TypeScript 实现支持空格仅输入字母触发查询的搜索功能

核心改动逻辑如下：

• 保留原有的空格规范化逻辑：自动合并连续空格、移除首尾空格，不会禁止用户输入正常的间隔空格
• 新增字母存在校验规则，通过正则判断输入内容是否包含至少一个大小写字母
• 触发搜索前先做合法性校验，不符合规则时取消已排队的防抖搜索任务，避免无效请求，同时清空历史搜索结果

修改后的完整代码如下：

import debounce from 'lodash/debounce';
import React, { useState, useRef } from 'react';
import { Keyboard } from 'react-native'; // 补充原代码遗漏的Keyboard导入

const SearchScreen = () => {
  const [searchText, setSearchText] = useState('');
  const [searchedText, setSearchedText] = useState('');
  const delayedSearch = useRef(
    debounce((text: string) => {
      _search(text);
    }, 400),
  ).current;

  const _clearSearch = () => {
    if (searchText.length === 0) {
      Keyboard.dismiss();
    }
    setSearchText('');
    setSearchedText('');
    // 清空时取消待执行的搜索任务
    delayedSearch.cancel();
  };

  const _search = (text: string) => {
    setSearchedText(text);
  };

  // 空格规范化：仅合并连续空格、移除首尾空格，允许单个间隔空格
  const removeExtraSpace = (s: string) => s.trim().split(/ +/).join(' ');

  // 校验是否包含至少一个大小写字母
  const hasAtLeastOneLetter = (s: string) => /[a-zA-Z]/.test(s);
  // 如果需要支持中文等其他语言的字符，可以替换正则为 /\p{L}/u

  const _onSearchChange = (text: string) => {
    const processedText = removeExtraSpace(text);
    setSearchText(processedText);
    // 先取消之前排队的搜索任务
    delayedSearch.cancel();
    
    if (hasAtLeastOneLetter(processedText)) {
      // 符合条件才触发搜索
      delayedSearch(processedText);
    } else {
      // 不符合条件清空搜索结果
      setSearchedText('');
    }
  };

  return (
    <Container>
      <SearchBar
        text={searchText}
        onClearText={_clearSearch}
        onChangeText={_onSearchChange}
      />

      <ProductSearchResult
        queryString={searchedText}
      />
    </Container>
  );
};

export default SearchScreen;

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