跳到主要内容

Search 搜索栏

Input 的搜索预设——左侧带 search 图标，输入后右侧出现 clear。常放在页面顶部或 NavBar 下方。

实时预览​

下方渲染的就是 src/components/ui/Search/Search.tsx 本体，通过 react-native-web 翻译成浏览器节点。

东方便利店
明珠超市
优家便利
悦家
王经理
李经理

视觉规范​

来源：src/components/ui/Search/Search.tsx（底层 Input/TextFieldBase styles）。

元素规则
高度36px（height={36}，普通 Input 为 44）
圆角8px（radius.md）
背景（idle）c.surfaceContainerHigh（亮色 #F0F0F0）；focus 时白底
左图标search · size={18} · c.foregroundSubtle（#999999）
占位默认「搜索…」，可覆盖（如「搜索客户」）
Clearvalue 非空时出现的 close 图标 · size={14} · c.foregroundSubtle，点击清空

用法​

import { Search } from '@unif/react-native-design';

<Search
  value={q}
  onChangeText={setQ}
  placeholder="搜索客户"
  onSubmit={handleSearch}
/>

API​

来源：src/components/ui/Search/types.ts、Search.tsx。

SearchProps = Omit<TextInputProps, 'style'> + 这 2 个扩展。所有 RN TextInput props（value / onChangeText / accessibilityLabel / autoFocus 等）都直接可用；style 被 omit。

PropType默认说明
onSubmit(value: string) => void—提交回调（按 return 键触发，回传当前 value）
placeholderstring?'搜索…'占位文字

这些是 Search 在底层 <Input> 上写死的预设（非可配置 prop）：leading = <Icon name="search" />、value 非空时 trailing 出现清除按钮、height={36}、returnKeyType="search"、accessibilityRole="search"。支持 ref（forwardRef 透传到内部 TextInput，可 searchRef.current?.focus()）。

无障碍（a11y）​

来源：src/components/ui/Search/Search.tsx、types.ts。

  • 默认 accessibilityRole：Search 在底层 Input（最终为原生 <TextInput>）上显式设 'search'，并设 returnKeyType="search"（键盘 return 键显示「搜索」）。
  • a11y props：SearchProps = Omit<TextInputProps, 'style'> & { onSubmit?, placeholder? }，故 RN TextInput 的全部 a11y props（accessibilityLabel、placeholder 等）都透传到底层输入框。朗读文案优先来自 accessibilityLabel，缺省时由 placeholder（默认「搜索…」）/ value 提供。
  • 清除按钮：value 非空时出现的 clear <Pressable> 硬编码 accessibilityRole="button" + accessibilityLabel="清除"，点击清空输入。
// placeholder 已能表意；如需更明确朗读可显式传 accessibilityLabel
<Search value={q} onChangeText={setQ} placeholder="搜索客户" accessibilityLabel="搜索客户" />

与 Input 的区别​

Search 是 Input 的常用预设（这些都是 Search 内部写死、非 Input 的可配置 prop —— Input 本身没有 leadingIcon / clearable 这类 prop，需自行组合 leading / trailing）：

  • 内置 leading 为 <Icon name="search" />
  • value 非空时内置 trailing 清除按钮
  • 高度 36px（Input 默认 44px）
  • 提交回调 onSubmit，returnKeyType="search"、accessibilityRole="search"