SearchBar

一个用于搜索输入功能的 Jetpack Compose SearchBar 组件。

Android

Included in Expo Go

Recommended version:

~57.0.3

Expo UI SearchBar 与官方 Jetpack Compose Search API 相匹配，并提供支持占位符文本和全屏扩展搜索的搜索输入。

🌐 Expo UI SearchBar matches the official Jetpack Compose Search API and provides a search input with support for placeholder text and expanded full-screen search.

Material 3 search bar with placeholder text

安装

🌐 Installation

Terminal

- npx expo install @expo/ui

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

用法

🌐 Usage

基本搜索栏

🌐 Basic search bar

BasicSearchBarExample.tsx

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

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

  return (
    <Host matchContents>
      <SearchBar onSearch={searchText => setQuery(searchText)} />
    </Host>
  );
}

带有占位符的搜索栏

🌐 Search bar with placeholder

当搜索字段为空时，使用 SearchBar.Placeholder 子组件来显示提示文本。

🌐 Use the SearchBar.Placeholder sub-component to display hint text when the search field is empty.

SearchBarPlaceholderExample.tsx

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

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

  return (
    <Host matchContents>
      <SearchBar onSearch={searchText => setQuery(searchText)}>
        <SearchBar.Placeholder>Search items...</SearchBar.Placeholder>
      </SearchBar>
    </Host>
  );
}

应用接口

🌐 API

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

Components

`ExpandedFullScreenSearchBar`

Type: React.Element<ExpandedFullScreenSearchBarProps>

ExpandedFullScreenSearchBar component for SearchBar. This component marks its children to be rendered in the expanded full-screen search bar.

`SearchBar`

Type: React.Element<SearchBarProps>

Renders a SearchBar component.

SearchBarProps

`children`

Optional • Type: ReactNode

The children of the component.

`modifiers`

Optional • Type: ModifierConfig[]

Modifiers for the component.

`onSearch`

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

Callback function that is called when the search text is submitted.

`SearchBarPlaceholder`

Type: React.Element<PlaceholderProps>

Placeholder component for SearchBar. This component marks its children to be rendered in the placeholder slot.