# @elik56a/react-native-pickers 中文文档

规范地址：https://npmcn.com/package/%40elik56a/react-native-pickers/

版本：1\.0\.0
npm 元数据更新时间：2026-11-09T09:02:49.491Z
中文译文更新时间：2026-11-13T12:37:13.174Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40elik56a/react-native-pickers
原文对照：https://npmcn.com/package/%40elik56a/react-native-pickers/?lang=original
项目主页：https://react-native-pickers.dev/
源码仓库：https://github.com/elik56a/react-native-pickers

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：3.7 MB，1754 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react \>=18，react-native \>=0\.72
- 首次发布：2026-10-25T16:03:36.386Z
- 最新版本发布：2026-11-09T09:02:49.000Z
- 近 30 天下载量：8153（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：41（近 12 个月 41 个）

## 中文简介

完全定制 本地零码的本地采摘者:轮子、时间、持续时间、日期(日历、范围、轮子)、月份、周条、可扩展日历、日程和时间表(每日和周视事件)、日期、选择(带有服务器搜索)、国家

## 安装

```sh
npm install @elik56a/react-native-pickers
```

也可以使用：`pnpm add @elik56a/react-native-pickers`、`yarn add @elik56a/react-native-pickers`、`bun add @elik56a/react-native-pickers`

## README

# 反应原生采摘者

[![npm](https://img.shields.io/npm/v/@elik56a/react-native-pickers)](https://www.npmjs.com/package/@elik56a/react-native-pickers) [![downloads](https://img.shields.io/npm/dw/@elik56a/react-native-pickers)](https://www.npmjs.com/package/@elik56a/react-native-pickers) [![bundle size](https://img.shields.io/bundlephobia/minzip/@elik56a/react-native-pickers)](https://bundlephobia.com/package/@elik56a/react-native-pickers) [![CI](https://github.com/elik56a/react-native-pickers/actions/workflows/ci.yml/badge.svg)](https://github.com/elik56a/react-native-pickers/actions/workflows/ci.yml) [![license](https://img.shields.io/npm/l/@elik56a/react-native-pickers)](https://npmcn.com/package/%40elik56a/react-native-pickers/LICENSE) [![OpenSSF Scorecard](https://api.scorecard.dev/projects/github.com/elik56a/react-native-pickers/badge)](https://scorecard.dev/viewer/?uri=github.com/elik56a/react-native-pickers)

**每个采取者都需要一个回放原生应用程序,在一个零本地代码的软件包中.** 轮子,时间,持续时间,日期,月,周条,可扩展日历,日期范围,日期和时间,选择,国家,电话号码,时区,分块控制,爱莫吉和取色器,滑行器,恒星评分和OTP代码输入,外加底页,动作表,菜单和可放取色器的表字段. 在iOS,Android和网络上是原生的,每个细节都是你的定制.

![React Native Pickers on an iPhone and an Android phone side by side: a date range picker with prices, wheel and clock-dial time pickers, a searchable select, an emoji picker, a phone number field, a color picker, a duration picker, and light and dark mode](https://raw.githubusercontent.com/elik56a/react-native-pickers/master/website/static/img/demo.gif)

[**文档活实例( L)**](https://react-native-pickers.dev/) • 妇女 [显示大小写](https://react-native-pickers.dev/showcase) • 妇女 [快开始](https://react-native-pickers.dev/docs/getting-started/quick-start) • 妇女 [llms- full.txt (英语)](https://react-native-pickers.dev/llms-full.txt) • 妇女 [更改日志](https://npmcn.com/package/%40elik56a/react-native-pickers/CHANGELOG.md)

## 为什么这个

-   **每个平台都有原生地.** IPhone上的iOS设计,Android上的材料设计以及浏览器中的网络设计,从一个代码路径. 更喜欢到处看看吗? 设定 `design="ios"` 一次 一次吗.
-   **零本土码.** 纯JavaScript on React Independent Core API. 纯JavaScript 互联网档案馆的存檔,存档日期2013-12-21. 在"博览会去"(Expo Go)中工作,赤裸回放原生和回放原生网络,"OTA"中的船只更新. 无再活化,手柄或SVG.
-   **你的定制.** 带有自动暗模式的主题符,每个视觉部分的样式槽,并制成道具进行全控. 您的设置总是胜过设计 .
-   **所造为表.** 每个拾取者都会在下行,在下行工作表或与 Cancel / Done 的模式中,并作为打开并显示值的窗体字段,使用来自React Hook Form,Formik或Zod的错误和帮助文本.
-   **真实的特征 构建在.** 日期范围包括:min/max之夜,多日期,有标记的日期和价格,可用服务器搜索的可搜索选择,有国旗和拨号代码的国取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取.
-   **国际和无障碍.** 名字,12/24h钟和一周开始的时间来自 `Intl` 用于任何地方; RTL 的布局翻转。 VoiceOver和TalkBack全程支持,并在网络上全面使用键盘.
-   **已打出字来.** 一般价值类型和模式歧视的结合: `mode="range"` 给您打字 `{ start, end }`。 。 。 .

## 安装

```sh
npm install @elik56a/react-native-pickers
```

或者说 `yarn add`, (中文(简体) ), `pnpm add`, (中文(简体) ), `npx expo install`需求 `react >= 18` 财务报告和审定财务报表 `react-native >= 0.72`。没有其它:没有安装吊舱、没有重建、没有配置插件.

## 快开始

```tsx
import { useState } from 'react';
import { View } from 'react-native';
import {
  DatePickerField,
  SelectPicker,
  TimePickerField,
} from '@elik56a/react-native-pickers';
import type { DateRange } from '@elik56a/react-native-pickers';

const ROOMS = [
  { label: 'Single', value: 'single' },
  { label: 'Double', value: 'double' },
  { label: 'Suite', value: 'suite' },
];

export default function Booking() {
  const [stay, setStay] = useState<DateRange>({ start: null, end: null });
  const [arrival, setArrival] = useState<Date | undefined>();
  const [room, setRoom] = useState<string | null>(null);

  return (
    <View style={{ gap: 16, padding: 16 }}>
      <DatePickerField
        label="Stay"
        mode="range"
        value={stay}
        onConfirm={setStay}
        minDate={new Date()}
        placeholder="Add dates"
      />
      <TimePickerField
        label="Arrival"
        value={arrival}
        onConfirm={setArrival}
        minuteInterval={15}
      />
      <SelectPicker
        label="Room"
        options={ROOMS}
        value={room}
        onChange={setRoom}
      />
    </View>
  );
}
```

每个字段在iOS和Android上的一个底页和网络上的一个倒放中打开取取取器,在这个平台的设计中,并显示为地块格式化的确认值.

## 构成部分

| 构成部分 | 这是什么 |
| --- | --- |
| [`WheelPicker`](https://react-native-pickers.dev/docs/components/wheel-picker) | 三维滚动轮:无限回路,已禁用的项目,自带到类型 |
| [`MultiWheelPicker`](https://react-native-pickers.dev/docs/components/multi-wheel-picker) | 共享一个选择带的几个轮子:持续时间、单位、复合值 |
| [`TimePicker`](https://react-native-pickers.dev/docs/components/time-picker) | 轮子,可点击的材料时钟拨号或列; 12h / 24h 从地盘,间隔,分/最大 |
| [`TimeRangePicker`](https://react-native-pickers.dev/docs/components/time-range-picker) | 开始和结束时间:开放时间、班次、过夜范围、分钟/最大长度 |
| [`DatePicker`](https://react-native-pickers.dev/docs/components/date-picker) | 日历(单一、范围、多个范围)或日/月/年轮 |
| [`MonthPicker`](https://react-native-pickers.dev/docs/components/month-picker) | 一个月又一年,就像卡片的过期: iOS上的车轮, 材料和网上的月网 |
| [`WeekStrip`](https://react-native-pickers.dev/docs/components/week-strip) | 连续一周有标记的天数;刷出或箭头以改变周数 |
| [`ExpandableCalendar`](https://react-native-pickers.dev/docs/components/expandable-calendar) | 用拖放或手柄打开月份的一周,用于排程屏幕 |
| [`Timeline`](https://react-native-pickers.dev/docs/components/timeline) | 一日或一周的取景:按小时显示的事件,并排重叠,全天活动,现在的一行和需要加载的自带 |
| [`Agenda`](https://react-native-pickers.dev/docs/components/agenda) | 事件逐日作为列表: iOS粘相日带或Google Calendar的日程, 与日历同步 |
| [`DurationPicker`](https://react-native-pickers.dev/docs/components/duration-picker) | 时间长度, 如定时器或修饰: 轮子、 要点击的材料编号框或列, 以秒计的值 |
| [`DateTimePicker`](https://react-native-pickers.dev/docs/components/date-time-picker) | 白天和时间在一起:一行轮子,或带有时间在它下面或旁边的日历 |
| [`SelectPicker`](https://react-native-pickers.dev/docs/components/select-picker) | 打开可搜索列表的字段:单一或多选择、芯片、组、图标、服务器搜索、搜索中的新选项 |
| [`SelectList`](https://react-native-pickers.dev/docs/components/select-list) | 同一列表, 内含 |
| [`CountryPicker`](https://react-native-pickers.dev/docs/components/country-picker) | 大约250个国家有旗帜和拨号码、本地化名称、首选国家 |
| [`LanguagePicker`](https://react-native-pickers.dev/docs/components/language-picker) | 86种有旗帜的语言,每种都用自有名称(Español,QQ),其名称取自下方的用户语言,从右到左检测 |
| [`PhoneField`](https://react-native-pickers.dev/docs/components/phone-field) | 电话号码输入:一个国家代码按钮,输入时格式化的数字,E.164值 |
| [`CurrencyPicker`](https://react-native-pickers.dev/docs/components/currency-picker) | 154种有旗帜,代码和符号的货币,用户语言名称,按名称,代码或符号搜索 |
| [`AmountField`](https://react-native-pickers.dev/docs/components/amount-field) | 货币输入按地块格式、货币小数位、货币按钮、取出屏幕的大额分类 |
| [`TimeZonePicker`](https://react-native-pickers.dev/docs/components/time-zone-picker) | 每个IANA时区及其GMT相抵,由相抵排序,设备的区在上方 |
| [`HorizontalList`](https://react-native-pickers.dev/docs/components/horizontal-list) | 分块控件或芯片来滚动侧面并显示下一个项目 |
| [`ColorPicker`](https://react-native-pickers.dev/docs/components/color-picker) | iOS 的网格 / spectrum / sliders, Google 的监视圈, 或浏览器的频谱; 有不透明和复制按钮的十六进制 |
| [`Slider`](https://react-native-pickers.dev/docs/components/slider) | iOS 的 knob, 材质 3 的手柄带有值泡, 或范围输入; 一个拇指或范围, 步骤, 图标 |
| [`OtpField`](https://react-native-pickers.dev/docs/components/otp-field) | 每个字符的框中的校验代码:iOS、Android和网络上的短信自动填充、粘贴、PIN模式 |
| [`Rating`](https://react-native-pickers.dev/docs/components/rating) | 星级评分:自拍或拖曳,分出半步,只读分数,自有图标 |
| [`EmojiPicker`](https://react-native-pickers.dev/docs/components/emoji-picker) | 1,923个emojis:分类,搜索,皮肤色调(长压为一emoji's),最新,版本过滤 |
| [`BottomSheet`](https://react-native-pickers.dev/docs/components/bottom-sheet) | 包含拖放内容的动画工作表 |
| [`Menu`](https://react-native-pickers.dev/docs/components/menu) | 由它触发的下拉或长压上下文的动作菜单;纯JS,所以它在博览会Go和网上运行 |
| [`ActionSheet`](https://react-native-pickers.dev/docs/components/action-sheet) | 共享或删除等动作列表: iOS卡或材料行, 破坏和禁用动作 |
| [拾取纸](https://react-native-pickers.dev/docs/components/picker-sheets) | `DatePickerSheet`, (中文(简体) ), `TimePickerSheet`, (中文(简体) ), `TimeRangePickerSheet`, (中文(简体) ), `DateTimePickerSheet`, (中文(简体) ), `DurationPickerSheet`, (中文(简体) ), `MonthPickerSheet`, (中文(简体) ), `ColorPickerSheet`, (中文(简体) ), `WheelPickerSheet`, (中文(简体) ), `EmojiPickerSheet`: 工作表中带有取消/ 完成的拾取器 |
| [拾取字段](https://react-native-pickers.dev/docs/components/picker-fields) | `DatePickerField`, (中文(简体) ), `TimePickerField`, (中文(简体) ), `TimeRangePickerField`, (中文(简体) ), `DateTimePickerField`, (中文(简体) ), `DurationPickerField`, (中文(简体) ), `MonthPickerField`, (中文(简体) ), `ColorPickerField`, (中文(简体) ), `WheelPickerField`, (中文(简体) ), `EmojiPickerField`, (中文(简体) ), `PickerField`: 打开拾取器的窗体字段 |

## 内入工作表或字段后

每取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取.

```tsx
// Inline: changes as the user scrolls or taps
<DatePicker value={date} onChange={setDate} />

// In a sheet: keeps a draft, commits on Done, discards on Cancel
<DatePickerSheet
  visible={open}
  onClose={() => setOpen(false)}
  value={date}
  onConfirm={setDate}
/>

// Behind a field: owns the open state, shows the confirmed value
<DatePickerField label="Date" value={date} onConfirm={setDate} />
```

工作表作为底页打开,或作为宽网窗口上的一种中心模式打开(`presentation="bottomSheet" | "modal"`) (中文(简体) ). 外地和 `SelectPicker` 也可以在字段下作为下行打开,即他们在网络上的默认值(`presentation="dropdown"`),或在其下扩展内线,将内容推到下方,比如iOS设置应用(英语:`presentation="inline"`) (中文(简体) ). `PickerField` 将您自己的工作表包入一个字段.

按钮文本也是你的: `confirmLabel`, (中文(简体) ), `cancelLabel` 财务报告和审定财务报表 `showCancel` 在任何工作表或字段上.

## 设计:每个平台的原生

默认情况下,每个平台都有自己的设计(`design="auto"`) (中文(简体) ). 设计改变形状和布局, 绝不改变颜色 :

|  | `ios` | `material` | `web` |
| --- | --- | --- | --- |
| 字段 | 上面的标签 | ,将标签浮出边框 | 上面的标签,紧凑,焦点环 |
| 取消/ 确认 | 除了一个中心标题, **完成** | 在内容之后, **** | 在内容之后, **完成** |
| 单项选择 | 在所选选项之外 | 每个选项都有收音机 | 在所选选项之外 |
| 日历 | 选择的有色日 | 选择了填满的一天,今天响起 | 选定一个已填平的平方天 |
| 时间 | 轮子 | 一个时钟拨号 | 点击时长和分数列 |
| 日期和时间 | 一行轮子 | 日历, 其下的时间字段 | 日历, 旁边的时间列 |
| 新闻 | 暗处 | 连线 | 暗处 |

为整个应用程序或一个组件选择一个设计:

```tsx
// The iOS look on Android and the web too
<PickersProvider design="ios">
  <App />
</PickersProvider>

// One component
<TimePicker design="material" value={time} onChange={setTime} />
```

或者保持设计,用自己的道具改变一个选择: `display="wheel"` 打开 `TimePicker`, (中文(简体) ), `timeDisplay` 财务报告和审定财务报表 `timePosition` 打开 `DateTimePicker`, (中文(简体) ), `confirmLabel` 在任何工作单上。 见 [设计指南](https://react-native-pickers.dev/docs/guides/designs)。 。 。 .

> **从0.10升级?** Android和网络现在获得材料和网络设计. 设定 `<PickersProvider design="ios">` 以保持之前的眼神无所不在.
> 
> **从0.12升级?** `EmojiPicker` 也遵循设计:在iOS和Android上,它的分类栏会向下移动,就像平台的emoji键盘. 设定 `categoryBarPosition="top"` 保持它的顶端.

## 自定义任何东西

**主题** 你的整个应用一次。 这是可选的:光和暗的默认遵循OS.

```tsx
import { PickersProvider } from '@elik56a/react-native-pickers';

<PickersProvider
  colorScheme="auto" // 'auto' | 'light' | 'dark'
  design="auto" // 'auto' | 'ios' | 'material' | 'web'
  theme={{
    colors: { primary: '#FF5A5F' },
    radius: { md: 8 },
    typography: { fontFamily: 'Inter' },
  }}
  darkTheme={{
    colors: { primary: '#FF8A8E', background: '#000' },
  }}
>
  <App />
</PickersProvider>
```

| 托肯组 | 密钥 |
| --- | --- |
| `colors` | `background` `surface` `sheet` `text` `textSecondary` `textDisabled` `primary` `onPrimary` `primaryMuted` `border` `backdrop` `indicator` `handle` `hover` `ripple` `danger` |
| `radius` | `sm` `md` `lg` `full` `sheet` |
| `spacing` | `xs` `sm` `md` `lg` `xl` |
| `typography` | `fontFamily` `fontFamilyMedium` `sizes` `weights` |
| `animation` | `duration` |

任何组件也需要 `theme` 财务报告和审定财务报表 `design` 用于本地覆盖.

**槽样式** 到达每个视觉部分,所以你永远不会叉:

```tsx
<DatePicker
  styles={{
    selectedDay: { borderRadius: 8 },
    dayText: { fontFamily: 'Inter' },
    rangeBand: { backgroundColor: '#FFE4E6' },
  }}
/>
```

**渲染道具** 替换一部分并保持其行为和无障碍性:

| 构成部分 | 渲染道具 |
| --- | --- |
| 轮子 | `renderItem`, (中文(简体) ), `renderIndicator` |
| `HorizontalList` | `renderItem`, (中文(简体) ), `renderArrow` |
| 日历 | `renderDay`, (中文(简体) ), `renderArrow` |
| `SelectPicker`, (中文(简体) ), `SelectList` | `renderOption`, (中文(简体) ), `renderGroupHeader`, (中文(简体) ), `renderLoading`, (中文(简体) ), `renderTrigger`, (中文(简体) ), `renderChevron` |
| `EmojiPicker` | `renderEmoji` |
| `Rating` | `renderIcon` |
| 字段 | `renderTrigger`, (中文(简体) ), `renderChevron` |

## 很高兴知道

-   **被控制或不受控制.** 过 `value` + 键 `onChange`,或 `defaultValue`。 。 。 . `SelectPicker`, (中文(简体) ), `SelectList` 财务报告和审定财务报表 `HorizontalList` 仅控制:更新 `value` 内 `onChange`。 。 。 .
    
-   **`onChange` 仅用于用户更改.** 设置 `value` 在代码中静静地移动拾取者。 轮子起火 `onChange` 当他们定居的时候 `onValueChanging` 在每一行,和 `Slider` 在释放时,和在每一步上,那是可喜的地方.
    
-   **工作表承诺完成.** `onConfirm` 获得值; 取消, 背景并拖放草稿 .
    
-   **满载快活.** 拖放,卷轴和动画运行在UI线条上,因此在JavaScript忙碌的时候,它们停留在60英尺. 见 [基准](https://react-native-pickers.dev/docs/guides/performance#benchmarks) 反对 `@gorhom/bottom-sheet`Quidone的取轮机和 `react-native-calendars`。 。 。 .
    
-   **日期为当地时间.** 按当地年份、月份和天数比较天数。 按顺序排列 `toDateKey(date)` (单位:千美元)`'YYYY-MM-DD'`(没有) `toISOString()`。 。 。 .
    
-   **比较小的本土捆.** Metro不树摇,所以在本地,从一个特征子路径导入(React Introduct 0.79+):
    
    ```tsx
    import { DatePicker } from '@elik56a/react-native-pickers/date';
    ```
    
    子路径 : `/wheel` `/time` `/duration` `/date` `/calendar` `/month` `/datetime` `/select` `/country` `/timezone` `/list` `/emoji` `/color` `/slider` `/rating` `/otp` `/action` `/sheet` `/core`。 。 。 .
    

## API 一览

这个 [完整 API 参考](https://react-native-pickers.dev/docs/api/reference) 列出每个道具。 这些是你要找的.

### 轮选器<T>

| Prop | 类型 | 默认 |
| --- | --- | --- |
| `items` | `(T | { label, value, disabled? })[]` |  |
| `value` | `T` |  |
| `onChange` | `(value, index) => void`当轮子摆平时 |  |
| `onValueChanging` | `(value, index) => void`,每行显示 |  |
| `loop` | `boolean` | `false` |
| `itemHeight` | `number` | `40` |
| `visibleItems` | `number` (奇数) | `5` |
| `variant` | `'3d' | 'flat'` | `'3d'` |
| `keyboardInput` | `boolean`: 将所选行打入 | `true` |
| `isEqual` | `(a, b) => boolean`对象值 | `Object.is` |

`MultiWheelPicker` 带 `columns: { key, items, value, onChange, flex?, width?, loop?, suffix? }[]` 和可选 `separator`。 。 。 .

### 时间选择器

| Prop | 类型 | 默认 |
| --- | --- | --- |
| `value` | `Date` (保留日期部分) | 现在 |
| `onChange` | `(date) => void` |  |
| `display` | `'wheel' | 'dial' | 'input' | 'list'` | 从设计 |
| `format` | `'12h' | '24h' | 'auto'` | `'auto'`从 `locale` |
| `minuteInterval` | `number` | `1` |
| `showSeconds` | `boolean` | `false` |
| `minTime` 编号 : `maxTime` | `Date` (日数) |  |
| `locale` | `string` | 设备 |

### MonthPicker, WeekStrip 和可扩展卡伦达尔

`MonthPicker` 选择月份和年份;值为 `Date` 在第一个月。 iOS上的轮子,即材料和网上一年下几个月的网格(`display`),与 `minDate` 编号 : `maxDate`, (中文(简体) ), `yearRange`, (中文(简体) ), `monthFormat` 财务报告和审定财务报表 `locale`。 。 。 . `MonthPickerField` 显示 `October 2026`。 。 。 .

`WeekStrip` 连续一周: `value`, (中文(简体) ), `onChange(date)`,刷或箭头到页面, `onWeekChange(weekStart)`日历 `markedDates`, (中文(简体) ), `minDate` 编号 : `maxDate`, (中文(简体) ), `isDateDisabled`, (中文(简体) ), `firstDayOfWeek` 财务报告和审定财务报表 `renderDay`。 。 。 .

`ExpandableCalendar` 是一个 `WeekStrip` 打开了月球的下方或下方的手柄 折回所选的一周: 相同的道具,加 `expanded` 编号 : `defaultExpanded` 编号 : `onExpandedChange` 财务报告和审定财务报表 `onMonthChange`。 。 。 .

### 时间表和议程

两个都用一个平整的系列事件, `{ id, title, start: Date, end: Date, allDay?, color?, subtitle? }`随你喜欢的田地延伸.

`Timeline` 是日历的日视图,或最多一周的相并(`numberOfDays`:按时间排列出的事件,相并相并相并,全天事件在网格上并有一条线在当下. 逐天刷取一页`date` 编号 : `onDateChange`, (中文(简体) ), `onEventPress` 打开事件并 `onSlotPress({ start, end })` 添加一个被窃听的网格. `startHour`, (中文(简体) ), `endHour`, (中文(简体) ), `hourHeight`, (中文(简体) ), `format` 财务报告和审定财务报表 `renderEvent` 塑造它.

`Agenda` 逐日列出同一事件:iOS上每天有粘接的乐队,在材料和网络中每天活动相隔的日期. 它滚动到 `selectedDate` 并用 `onVisibleDateChange`,所以它保持与一个 `ExpandableCalendar` {\\fn华文仿宋\\fs16\\1chd1d1d1}在它上面.

```tsx
const [day, setDay] = useState(new Date());

<ExpandableCalendar value={day} onChange={setDay} />
<Agenda events={events} selectedDate={day} onVisibleDateChange={setDay} style={{ flex: 1 }} />
// or a day view
<Timeline events={events} date={day} onDateChange={setDay} onSlotPress={addEvent} style={{ flex: 1 }} />
```

### 颜色选择器

| Prop | 类型 | 默认 |
| --- | --- | --- |
| `value` | 六进制 `string`,例如 `'#E4572E'` | `'#2196F3'` |
| `onChange` | `(color) => void`,与 `'#RRGGBB'` |  |
| `display` | `'tabs' | 'swatches' | 'spectrum'` | 从设计 |
| `colors` | `(string | { value, label? })[]` | 24个已命名的颜色 |
| `showCustom` | `boolean`: 网格、频谱、滑动和十六进制字段 | `true` |
| `showAlpha` | `boolean`: 一个不透明的滑动器, `'#RRGGBBAA'` 数值 | `false` |
| `onCopy` | `(hex) => unknown`: 复制按钮; 网页上的浏览器剪贴板 |  |

`ColorPickerField` 显示 swatch 和 ix 代码 .

### 幻灯片

| Prop | 类型 | 默认 |
| --- | --- | --- |
| `value` | `number`,或 `[number, number]` 与 `range` | `min` |
| `onChange` | `(value) => void`: 发布时,或键或屏幕读取步骤 |  |
| `onValueChanging` | `(value) => void`: 拖曳时的每个步骤 |  |
| `min` 编号 : `max` 编号 : `step` | `number`· ; `step={0}` 任何数值 | `0` 编号 : `100` 编号 : `1` |
| `range` | `boolean`: 二个拇指 | `false` |
| `showSteps` | `boolean`: 每步一个点 | `false` |
| `marks` 编号 : `snapToMarks` | `(number | { value, label? })[]`: 有标签的点 / 只有标记可以选择 | 编号 : `false` |
| `valueLabel` | `'never' | 'drag' | 'always'`: 价值泡沫 | `'drag'` 物质 |
| `minimumIcon` 编号 : `maximumIcon` | `ReactNode` 在赛道旁 |  |

### Otp 战地

| Prop | 类型 | 默认 |
| --- | --- | --- |
| `value` | `string`: 到目前为止的代码 | `''` |
| `onChange` | `(code) => void`: 当用户类型、删除或粘贴时 |  |
| `onComplete` | `(code) => void`: 一旦填入最后一个单元格 |  |
| `length` | `number` | `6` |
| `inputMode` | `'numeric' | 'text'` | `'numeric'` |
| `secureTextEntry` | `boolean`:点,一个PIN | `false` |
| `error` 编号 : `helperText` | `string | boolean` 编号 : `string`:红盒子,它们下面的信息 |  |

### 评级

| Prop | 类型 | 默认 |
| --- | --- | --- |
| `value` | `number` | `0` |
| `onChange` | `(value) => void`:在水龙头上,拖曳的结束,或关键步骤 |  |
| `max` 编号 : `step` | `number`· ; `step={0.5}` 半个恒星 | `5` 编号 : `1` |
| `readOnly` | `boolean`: 显示任何分数, 无触摸 | `false` |
| `size` 编号 : `color` 编号 : `emptyColor` | 恒星大小和颜色 | `32` / 金子/ 主题边框 |
| `renderIcon` | `({ index, filled, color, size }) => ReactNode` | 页:1 |

### 长度选择器

相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相相去相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相 值为数秒.

| Prop | 类型 | 默认 |
| --- | --- | --- |
| `value` | `number` (单位:秒) | `0` |
| `onChange` | `(seconds) => void` |  |
| `display` | `'wheel' | 'input' | 'list'` | 从设计 |
| `showHours` 编号 : `showSeconds` | `boolean` | `true` 编号 : `false` |
| `min` 编号 : `max` | `number` (单位:秒) | `0` 23小时59分59秒 |
| `minuteInterval` 编号 : `secondInterval` | `number` | `1` |
| `labels` | `{ hours?, minutes?, seconds? }` | `h`, (中文(简体) ), `min`, (中文(简体) ), `s` |

`DurationPickerField` 显示确认的持续时间为: `1 h 30 min`,以及 `formatDuration(seconds)` 写它的方式相同.

### 日期选择器

| `mode` | `value` | `onChange` | 额外道具 |
| --- | --- | --- | --- |
| `'single'` (默认) | `Date | null` | `(date)` |  |
| `'range'` | `{ start, end }` | `(range)` | `minRangeDays` `maxRangeDays` `allowSingleDayRange` `presets` |
| `'multiple'` | `Date[]` | `(dates)` | `maxSelections` |
| `'ranges'` | `DateRange[]` | `(ranges)` | `maxRanges` |

| Prop | 类型 | 默认 |
| --- | --- | --- |
| `display` | `'calendar' | 'wheel'` | `'calendar'` |
| `minDate` 编号 : `maxDate` | `Date` |  |
| `isDateDisabled` | `(date) => boolean` |  |
| `markedDates` | `{ 'YYYY-MM-DD': { dots?, label?, textColor?, disabled? } }` |  |
| `locale` | `string` | 设备 |
| `firstDayOfWeek` | `0`– 说吧 –`6` (单位:千美元)`0` = 星期日) (中文(简体) ) | 从 `locale` |
| `onMonthChange` | `(month) => void` |  |

### 日期时间选择器

| Prop | 类型 | 默认 |
| --- | --- | --- |
| `value` | `Date` | 现在 |
| `onChange` | `(date) => void` |  |
| `display` | `'wheel' | 'calendar'` | `'wheel'` 在iOS设计中,其他 `'calendar'` |
| `minDate` 编号 : `maxDate` | `Date` (日期和时间) |  |
| `timePosition` | `'beside' | 'below'` | `'beside'` 网络 |
| `timeDisplay` | `'wheel' | 'dial' | 'input' | 'list'` | 从设计 |
| `minuteInterval` | `number` | `1` |
| `calendarProps` | 日历道具,例如 `markedDates` |  |

### 选择点击器<T> 和选择列表<T>

| Prop | 类型 | 默认 |
| --- | --- | --- |
| `options` | `{ label, value, description?, icon?, group?, disabled?, keywords? }[]` | `[]` |
| `value` | `T | null`,或 `T[]` 与 `multiple` |  |
| `onChange` | `(value, option) => void` |  |
| `multiple` | `boolean`,与 `maxSelected` 财务报告和审定财务报表 `chips` | `false` |
| `searchable` | `boolean` | 8个以上选项 |
| `loadOptions` | `(query) => Promise<options>`: 搜索服务器 |  |
| `clearable` 编号 : `onClear` | `boolean` 编号 : `() => void` | `false` |
| `error` 编号 : `helperText` 编号 : `required` | `string | boolean` 编号 : `string` 编号 : `boolean`: 字段随下方的消息而变红 |  |
| `presentation` | `'auto' | 'bottomSheet' | 'modal' | 'dropdown' | 'inline'` | `'auto'`: 网络下拉 |

`loadOptions` 等待打入暂停, 显示加载器并忽略对旧询问的回答 :

```tsx
<SelectPicker
  label="City"
  loadOptions={(query) => api.searchCities(query)}
  value={city}
  onChange={setCity}
/>
```

### 国家选择器

A 类 `SelectPicker` 拥有约250个国家。 值是 ISO 代码 (`'IL'`),并且搜索匹配英语和本土名称,ISO代码和拨号代码.

| Prop | 类型 | 默认 |
| --- | --- | --- |
| `value` 编号 : `onChange` | `CountryCode`,或 `CountryCode[]` 与 `multiple` |  |
| `preferred` | `CountryCode[]`: 被钉在顶上 |  |
| `countries` 编号 : `exclude` | `CountryCode[]` | 全部 |
| `showDialCode` | `boolean` | `false` |
| `locale` | `string`: 姓名通过 `Intl.DisplayNames`,英语后退 | 设备定位 |

`getCountry('IL')` 返回时 `{ code, name, nativeName, dialCode, flag, keywords }`。 。 。 .

### 语言选择器

A 类 `SelectPicker` 使用86种语言,用于应用程序的语言设置。 每个节目都用自己的名字,例如 `Español`,其名称取自下方用户语言. 值为 BCP 47 标记 (`'es'`, (中文(简体) ), `'pt-BR'`, (中文(简体) ), `'zh-Hant'`) (中文(简体) ).

| Prop | 类型 | 默认 |
| --- | --- | --- |
| `value` 编号 : `onChange` | `LanguageCode`,或 `LanguageCode[]` 与 `multiple` |  |
| `preferred` | `LanguageCode[]`: 被钉在顶上 |  |
| `languages` 编号 : `exclude` | `LanguageCode[]` | 全部 |
| `locale` | `string`: 姓名通过 `Intl.DisplayNames`,英语后退 | 设备定位 |
| `showFlag` 编号 : `flags` | `boolean` 编号 : `{ en: 'GB' }` 更改一些旗帜 | `true` |

`isRtlLanguage('ar-EG')` 说明语言是否从右到左写出,以及 `getLanguage('he')` 返回时 `{ code, name, nativeName, country, rtl }`。 。 。 .

### 电话领域

一个电话号码输入:一个打开国家列表的旗帜和呼叫代码按钮,然后数字,将国家写作的方式分组. 数值为E.164(`'+972541234567'`; 粘贴 `+44…` 数字切换国家.

| Prop | 类型 | 默认 |
| --- | --- | --- |
| `value` 编号 : `onChange` | `string` 联合国, `onChange(value, { country, nationalNumber, valid })` |  |
| `country` 编号 : `defaultCountry` 编号 : `onCountryChange` | `CountryCode` | `'US'` |
| `preferred` 编号 : `countries` 编号 : `exclude` 编号 : `locale` | 作为 `CountryPicker` |  |
| `label` 编号 : `placeholder` | `string` | 以国家为形式的范例 |

`parsePhone('+44 7911 123456')` 返回时 `{ country: 'GB', nationalNumber: '7911123456' }`。 。 。 .

### 货币选择器和金额

`CurrencyPicker` 是一个 `SelectPicker` 含有154种货币,每种货币都有其旗帜、代码和符号;其值为ISO 4217代码(`'EUR'`) (中文(简体) ). `AmountField` 是金钱输入: 以 locale 格式键入的金额 `$1,234.50`, (中文(简体) ), `1.234,50 €`),币值为小数位. 值是一个数字,或 `null` 当虚空.

| Prop | 类型 | 默认 |
| --- | --- | --- |
| `value` 编号 : `onChange` | `number | null` |  |
| `currency` 编号 : `defaultCurrency` 编号 : `onCurrencyChange` | `CurrencyCode` | `'USD'` |
| `variant` | `'field'`,或 `'large'`:大而居中,用于离职和寄出货币屏幕 | `'field'` |
| `showCurrencyPicker` | `boolean`: 打开的旗帜和代码按钮 `CurrencyPicker` | `false` |
| `locale` | `string`: 分隔符和符号侧 | 设备定位 |

`getCurrency('JPY')` 返回时 `{ code, name, symbol, decimals, country }`· ; `decimals` 将金额变成小单位.

### 时间区选择器

A 类 `SelectPicker` 与每个IANA的时区相接而成,每个时区与其城市相接,GMT相接并取名相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相相接相接相接相接相接相接相相相接相接相接相接相接相接相相相接相接相接相接相接相接相相接相接相接相接相相接相接相相相相相相相相相接相 值为 IANA 名称 (`'Europe/Lisbon'`); 旧名像 `'Asia/Calcutta'` 被接受并报告为新的.

| Prop | 类型 | 默认 |
| --- | --- | --- |
| `value` 编号 : `onChange` | `string`,或 `string[]` 与 `multiple` |  |
| `preferred` | `string[]`: 被钉在顶上 | 设备的区域 |
| `timeZones` | `string[]` | 全部 |
| `date` | `Date`:冲销时间 | 现在 |

`getDeviceTimeZone()`, (中文(简体) ), `getTimeZoneOffset(id)` (分钟)和 `formatGmtOffset(330)` → `'GMT+5:30'` 也输出.

### 水平列表<T>

| Prop | 类型 | 默认 |
| --- | --- | --- |
| `items` | `{ label, value, disabled?, icon? }[]` |  |
| `value` | `T` |  |
| `onChange` | `(value, item) => void` |  |
| `variant` | `'segmented' | 'chips'` | `'segmented'` |
| `iconPosition` | `'left' | 'right' | 'top' | 'bottom'` | `'left'` |
| `showArrows` | `boolean`:qq 滚动列表的按钮 | `false` |
| `arrowPosition` | `'outside' | 'overlay'`: 列表外或其边缘 | `'outside'` |

### 爱莫吉派克

| Prop | 类型 | 默认 |
| --- | --- | --- |
| `onSelect` | `(emoji, data) => void` |  |
| `columns` 编号 : `height` | `number` | `8` 编号 : `380` |
| `categories` 编号 : `exclude` | 要显示的, 顺序/ 要隐藏的字符 | 全部 |
| `maxEmojiVersion` | `number`隐藏旧的装置无法渲染 |  |
| `skinTone` 编号 : `onSkinToneChange` | `0`– 说吧 –`5`,从qq按钮;长长的媒体选择一个emoji的音调 | `0` |
| `recent` 编号 : `onRecentChange` | `string[]`: 坚持您自己的存储 | `[]` |
| `categoryBarPosition` | `'auto' | 'top' | 'bottom'`数字 : `auto` 在iOS和Android的下方,在网络的上方 | `'auto'` |

### 工作表、 字段、 底盘、 动作板和菜单

| 构成部分 | 道具 |
| --- | --- |
| 拾取纸 | `visible` `onClose` `value` `onConfirm` `title` `confirmLabel` `cancelLabel` `showCancel` `presentation` `sheetProps`,加上拾取者的道具 |
| 拾取字段 | 工作表的道具没有 `visible`附加时 `label` `placeholder` `displayValue` `clearable` `onClear` `disabled` `error` `helperText` `required` `presentation` `renderTrigger` `renderChevron` |
| `BottomSheet` | `visible` `onClose` `title` `headerLeft` `headerRight` `footer` `height` `enableSwipeToClose` `expandable` `showHandle` `presentation` |
| `ActionSheet` | `visible` `onClose` `actions` (单位:千美元)`{ label, onPress, description, icon, selected, destructive, disabled }`(中文(简体) ) `title` `message` `showCancel` `cancelLabel` `presentation`· ; `onPress` 工作表关闭后运行 |
| `Menu` | `actions` `children` (触发器,或 `({ open }) => …`(中文(简体) ) `title` `align` `width` `presentation` (单位:千美元)`'menu' | 'sheet'`(中文(简体) ) `openOnLongPress` `disabled` `onOpen` `onClose` |
| `useActionSheet()` | 返回时 `{ show, hide, actionSheet }`: 渲染 `actionSheet` 一回电话 `show({ title, actions })` 从任何处理器, 没有提供者 |

### 公用事业

| 区域 | 出口 |
| --- | --- |
| 日期 | `toDateKey` `addDays` `addMonths` `isSameDay` `formatDate` `getRangePresets` |
| 时间 | `formatTimeRange` `getTimeRangeSeconds` `formatDuration` |
| 国家、电话、时区 | `getCountry` `parsePhone` `isValidPhone` `toE164` `getDeviceTimeZone` `formatGmtOffset` |
| 颜色 | `normalizeHex` `hexToHsv` `hsvToHex` `withAlpha` |
| 爱莫吉 | `getAllEmojis` `searchEmojis` `findEmoji` `withSkinTone` |
| 主题 | `usePickerTheme` `createTheme` `resolveDesign` |
| 工作表 | `useDraft`: 自己工作表的草稿状态 |

## 平台

| 平台 | 支助 |
| --- | --- |
| 博览会 Go, Dev 建筑, EAS | ✅ |
| 裸体反应原生(iOS, Android),新建筑,赫尔墨斯 | ✅ |
| 反应原生网络, 博览会路由器网络, Next.js | ✅ |
| 视窗、 macOS | 未测试;只使用核心组件,使用材料设计 |

在浏览器中预览iOS或Android行为(Storybook,一个设计系统),设置 `<PickersProvider platform="ios">`。 。 。 .

## 人工智能助理

完整的文件是Markdown文件, [`llms-full.txt`](https://react-native-pickers.dev/llms-full.txt),索引为 [`llms.txt`](https://react-native-pickers.dev/llms.txt)。它也在货包内 `node_modules/@elik56a/react-native-pickers/llms-full.txt`,匹配已安装的版本。 一个代码生成的短小作弊表正在 [人工智能助理](https://react-native-pickers.dev/docs/resources/ai) 页 次.

## 学多点

-   **指南:** [设计](https://react-native-pickers.dev/docs/guides/designs) • 妇女 [主题](https://react-native-pickers.dev/docs/guides/theming) • 妇女 [带有槽的样式](https://react-native-pickers.dev/docs/guides/styling) • 妇女 [制作道具](https://react-native-pickers.dev/docs/guides/render-props) • 妇女 [i18n 和 RTL](https://react-native-pickers.dev/docs/guides/i18n-rtl) • 妇女 [无障碍](https://react-native-pickers.dev/docs/guides/accessibility) • 妇女 [杂乱](https://react-native-pickers.dev/docs/guides/haptics) • 妇女 [表单](https://react-native-pickers.dev/docs/guides/forms) • 妇女 [类型脚本](https://react-native-pickers.dev/docs/guides/typescript)
-   **食谱 :** [旅馆预订范围](https://react-native-pickers.dev/docs/recipes/booking-range) • 妇女 [生日快乐](https://react-native-pickers.dev/docs/recipes/birthday) • 妇女 [提醒时间](https://react-native-pickers.dev/docs/recipes/alarm-time) • 妇女 [会期](https://react-native-pickers.dev/docs/recipes/duration) • 妇女 [国家和电话号码](https://react-native-pickers.dev/docs/recipes/country-select) • 妇女 [服务器搜索](https://react-native-pickers.dev/docs/recipes/server-search) • 妇女 [飞行搜索表](https://react-native-pickers.dev/docs/recipes/flight-search-form) • 妇女 [聊天的emoji](https://react-native-pickers.dev/docs/recipes/chat-emoji) • 妇女 [过滤工作表](https://react-native-pickers.dev/docs/recipes/filters-sheet)
-   **从另一个图书馆来的?** [移徙](https://react-native-pickers.dev/docs/resources/migration/) 绘制 `@react-native-community/datetimepicker`, (中文(简体) ), `react-native-date-picker`, (中文(简体) ), `react-native-modal-datetime-picker`, (中文(简体) ), `react-native-calendars`, (中文(简体) ), `react-native-picker-select`, (中文(简体) ), `react-native-dropdown-picker`, (中文(简体) ), `react-native-element-dropdown`, (中文(简体) ), `@react-native-picker/picker`,本地的分块控制, `react-native-ui-datepicker`, (中文(简体) ), `react-native-calendar-strip`, (中文(简体) ), `react-native-modal-selector`, (中文(简体) ), `reanimated-color-picker`, (中文(简体) ), `react-native-country-picker-modal`, (中文(简体) ), `react-native-phone-number-input`, (中文(简体) ), `rn-emoji-keyboard`, (中文(简体) ), `@react-native-community/slider`, (中文(简体) ), `react-native-otp-entry`, (中文(简体) ), `react-native-ratings`, (中文(简体) ), `@gorhom/bottom-sheet`, (中文(简体) ), `react-native-modal`, (中文(简体) ), `@expo/react-native-action-sheet`, (中文(简体) ), `zeego` 还有更多. [比较](https://react-native-pickers.dev/docs/resources/comparison) 显示何时选择其它东西.

## 捐款

欢迎提出问题和拉动请求。 见 [捐款额](https://npmcn.com/package/%40elik56a/react-native-pickers/CONTRIBUTING.md) 用于设置,示例应用程序和文档网站.

Emoji的数据来自 [爱莫吉基地](https://emojibase.dev/) (麻省理工学院).

## 许可证

麻省理工学院 [埃里亚乌·克赖尔](https://www.linkedin.com/in/elikri/)

## 常见问题

### @elik56a/react-native-pickers 是什么？

完全定制 本地零码的本地采摘者:轮子、时间、持续时间、日期\(日历、范围、轮子\)、月份、周条、可扩展日历、日程和时间表\(每日和周视事件\)、日期、选择\(带有服务器搜索\)、国家

### 如何安装 @elik56a/react-native-pickers？

在项目目录运行 npm install @elik56a/react-native-pickers，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=18）、react-native（\>=0\.72）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @elik56a/react-native-pickers 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @elik56a/react-native-pickers 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @elik56a/react-native-pickers 可以商用吗？

@elik56a/react-native-pickers 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @elik56a/react-native-pickers 的下载量有多少？

根据 npm 官方下载统计，@elik56a/react-native-pickers 在 2026/10/14 – 2026/11/12 这 30 天内被下载 8,153 次，日均约 272 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @elik56a/react-native-pickers 还在维护吗？

最新版本 1\.0\.0 发布于 2026/11/09（4 天前）；至今共发布 41 个版本，其中过去 12 个月发布了 41 个；首次发布于 2026/10/26。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。