---
title: SearchBar - 搜索栏组件
nav:
  title: RN组件
  path: /react-native
group:
  title: 交互组件
  path: /interaction
---

# SearchBar 搜索栏组件

## 效果演示

### 1. 默认配置

```tsx | pure
<SearchBar onChange={value => console.log(value)} onSearch={value => console.log(value)} />
```

<center>
  <figure>
    <img
      alt="searchBar-ios1.png"
      src="https://td-dev-public.oss-cn-hangzhou.aliyuncs.com/maoyes-app/1608868154498024610.png"
      style="width: 375px; margin-right: 10px; border: 1px solid #ddd;"
    />
  </figure>
</center>

### 2. 配置 placeholder、cancelTitle

```tsx | pure
<SearchBar placeholder="请输入酒店/关键词" cancelTitle="cancel" />
```

<center>
  <figure>
    <img
      alt="searchBar-ios2.png"
      src="https://td-dev-public.oss-cn-hangzhou.aliyuncs.com/maoyes-app/1608868196958509649.png"
      style="width: 375px; margin-right: 10px; border: 1px solid #ddd;"
    />
  </figure>
</center>

### 3. 配置 placeholderPosition

```tsx | pure
<SearchBar placeholderPosition="center" />
```

<center>
  <figure>
    <img
      alt="searchBar-ios3.png"
      src="https://td-dev-public.oss-cn-hangzhou.aliyuncs.com/maoyes-app/1608868215970101527.png"
      style="width: 375px; margin-right: 10px; border: 1px solid #ddd;"
    />
  </figure>
</center>

### 4. 配置 defaultValue、autoFocus

```tsx | pure
<SearchBar defaultValue="美团酒店" autoFocus />
```

<center>
  <figure>
    <img
      alt="searchBar-ios4.png"
      src="https://td-dev-public.oss-cn-hangzhou.aliyuncs.com/maoyes-app/1608868232946037474.png"
      style="width: 375px; margin-right: 10px; border: 1px solid #ddd;"
    />
  </figure>
</center>

### 5. 配置 children

```tsx | pure
<SearchBar inputContainerStyle={{ flex: 6 }} containerStyle={{ height: px(40) }}>
  <>
    <Flex flex={1}>
      <Icon name="left" />
    </Flex>
    <Flex flex={2} height={px(40)} justifyContent="center">
      <Text>请入住</Text>
    </Flex>
  </>
</SearchBar>
```

<center>
  <figure>
    <img
      alt="searchBar-ios5.png"
      src="https://td-dev-public.oss-cn-hangzhou.aliyuncs.com/maoyes-app/1608868245196272524.png"
      style="width: 375px; margin-right: 10px; border: 1px solid #ddd;"
    />
  </figure>
</center>

## API

| 属性             | 必填    | 说明                     | 类型                     | 默认值    |
| ---------------- | ------- | ------------------------ | ------------------------ | --------- |
| placeholder      | `false` | 搜索框的 placeholder     | `string`                 | `搜索`    |
| showCancelButton | `false` | 是否展示取消按钮         | `boolean`                | `true`    |
| allowClear       | `false` | 是否允许清除             | `boolean`                | `true`    |
| disabled         | `false` | 搜索框是否禁用           | `boolean`                | `false`   |
| defaultValue     | `false` | 搜索框的默认值           | `string`                 |           |
| autoFocus        | `false` | 是否自动 focus           | `boolean`                | `false`   |
| cancelText       | `false` | 取消文字                 | `string`                 | `取消`    |
| returnKeyType    | `false` | 键盘下方的按钮类型       | `ReturnKeyTypeOptions`   | `search`  |
| keyboardType     | `false` | 弹出键盘类型             | `KeyboardTypeOptions`    | `default` |
| style            | `false` | 最外层 view 的样式       | `ViewStyle`              |           |
| inputStyle       | `false` | input 的样式             | `TextStyle`              |           |
| onChange         | `false` | 输入改变时的回调         | `(text: string) => void` |           |
| onSearch         | `false` | 提交时的搜索             | `(text: string) => void` |           |
| activeOpacity    | `false` | 取消按钮按下时的不透明度 | `number`                 | `0.6`     |