DockedSearchBar

用于显示内联搜索输入框的 Jetpack Compose DockedSearchBar 组件。

Android

Included in Expo Go

GitHub

npm

更新日志

Recommended version:

~58.0.1

Expo UI DockedSearchBar 与官方 Jetpack Compose SearchBar API 相匹配，并显示一个固定在父布局中的搜索输入框，而不是展开至全屏。

安装

Terminal

- npx expo install @expo/ui

- yarn expo install @expo/ui

- pnpm expo install @expo/ui

- bun expo install @expo/ui

If you are installing this in an existing React Native app, make sure to install expo in your project.

用法

基本固定式搜索栏

BasicDockedSearchBarExample.tsx

import { useState } from 'react';
import { Host, DockedSearchBar } from '@expo/ui/jetpack-compose';

export default function BasicDockedSearchBarExample() {
  const [query, setQuery] = useState('');

  return (
    <Host matchContents>
      <DockedSearchBar onQueryChange={setQuery} />
    </Host>
  );
}

添加占位文字和前置图标

使用 DockedSearchBar.Placeholder 和 DockedSearchBar.LeadingIcon 插槽组件来自定义搜索栏的外观。

DockedSearchBarWithSlotsExample.tsx

import { useState } from 'react';
import {
  Host,
  DockedSearchBar,
  Text,
} from '@expo/ui/jetpack-compose';

export default function DockedSearchBarWithSlotsExample() {
  const [query, setQuery] = useState('');

  return (
    <Host matchContents>
      <DockedSearchBar onQueryChange={setQuery}>
        <DockedSearchBar.Placeholder>
          <Text>Search items...</Text>
        </DockedSearchBar.Placeholder>
        <DockedSearchBar.LeadingIcon>
          <Text>🔍</Text>
        </DockedSearchBar.LeadingIcon>
      </DockedSearchBar>
    </Host>
  );
}

API

import { DockedSearchBar } from '@expo/ui/jetpack-compose';

Components

`DockedSearchBar`

Android

Type: React.Element<DockedSearchBarProps>

DockedSearchBarProps

`children`

Android

Optional • Type: ReactNode

The children of the component.

`modifiers`

Android

Optional • Type: ModifierConfig[]

Modifiers for the component.

`onQueryChange`

Android

Optional • Type: (query: string) => void

Callback function that is called when the search query changes.

`DockedSearchBarLeadingIcon`

Android

Type: React.Element<LeadingIconProps>

`DockedSearchBarPlaceholder`

Android

Type: React.Element<PlaceholderProps>