反应原生采摘者

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

文档活实例( L) • 妇女 显示大小写 • 妇女 快开始 • 妇女 llms- full.txt (英语) • 妇女 更改日志

为什么这个

• 每个平台都有原生地. 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 }。 。 。 .

安装

npm install @elik56a/react-native-pickers

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

快开始

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上的一个底页和网络上的一个倒放中打开取取取器,在这个平台的设计中,并显示为地块格式化的确认值.

构成部分

内入工作表或字段后

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

// 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") (中文(简体) ). 设计改变形状和布局, 绝不改变颜色 :

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

// 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 在任何工作单上。 见 设计指南。 。 。 .

从0.10升级? Android和网络现在获得材料和网络设计. 设定 <PickersProvider design="ios"> 以保持之前的眼神无所不在.

从0.12升级? EmojiPicker 也遵循设计:在iOS和Android上,它的分类栏会向下移动,就像平台的emoji键盘. 设定 categoryBarPosition="top" 保持它的顶端.

自定义任何东西

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

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>

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

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

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

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

很高兴知道

• 被控制或不受控制. 过 value + 键 onChange,或 defaultValue。 。 。 . SelectPicker, (中文(简体) ), SelectList 财务报告和审定财务报表 HorizontalList 仅控制:更新 value 内 onChange。 。 。 .

• onChange 仅用于用户更改. 设置 value 在代码中静静地移动拾取者。 轮子起火 onChange 当他们定居的时候 onValueChanging 在每一行,和 Slider 在释放时,和在每一步上,那是可喜的地方.

• 工作表承诺完成. onConfirm 获得值; 取消, 背景并拖放草稿 .

• 满载快活. 拖放,卷轴和动画运行在UI线条上,因此在JavaScript忙碌的时候,它们停留在60英尺. 见 基准 反对 @gorhom/bottom-sheetQuidone的取轮机和 react-native-calendars。 。 。 .

• 日期为当地时间. 按当地年份、月份和天数比较天数。 按顺序排列 toDateKey(date) (单位:千美元)'YYYY-MM-DD'(没有) toISOString()。 。 。 .

• 比较小的本土捆. Metro不树摇,所以在本地,从一个特征子路径导入(React Introduct 0.79+):

  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 参考 列出每个道具。 这些是你要找的.

轮选器<T>

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

时间选择器

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}在它上面.

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 }} />

颜色选择器

ColorPickerField 显示 swatch 和 ix 代码 .

幻灯片

Otp 战地

评级

长度选择器

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

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

日期选择器

日期时间选择器

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

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

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

国家选择器

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

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

语言选择器

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

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

电话领域

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

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

货币选择器和金额

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

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

时间区选择器

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

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

水平列表<T>

爱莫吉派克

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

公用事业

平台

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

人工智能助理

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

学多点

• 指南: 设计 • 妇女 主题 • 妇女 带有槽的样式 • 妇女 制作道具 • 妇女 i18n 和 RTL • 妇女 无障碍 • 妇女 杂乱 • 妇女 表单 • 妇女 类型脚本
• 食谱 : 旅馆预订范围 • 妇女 生日快乐 • 妇女 提醒时间 • 妇女 会期 • 妇女 国家和电话号码 • 妇女 服务器搜索 • 妇女 飞行搜索表 • 妇女 聊天的emoji • 妇女 过滤工作表
• 从另一个图书馆来的? 移徙 绘制 @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 还有更多. 比较 显示何时选择其它东西.

捐款

欢迎提出问题和拉动请求。 见 捐款额 用于设置,示例应用程序和文档网站.

Emoji的数据来自 爱莫吉基地 (麻省理工学院).

许可证

麻省理工学院 埃里亚乌·克赖尔