# Feature Request: Expose scrolling events (`onScrollStart` / `onScrollEnd`) or `onScrollingChange` for DateTimePicker

未关闭
  • 哪里不对？
#1,030 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

评估

难度
5/5
预计耗时
一周以上
新手友好度
35/100
Issue 类型
功能
描述清晰度
基本清楚
活跃度
停滞
技术栈
javascript, react-native
领域
mobile

调研方向

Start by reading the DateTimePicker component and its native iOS, Android, and Windows picker implementations to see where scrolling state can be observed and exposed. The issue proposes either start/end callbacks or a boolean callback but gives no file or test names. Done means host apps can detect when the wheel is scrolling and disable actions until it settles.

由索引模型根据 Issue 内容生成。

描述

Feature request

Summary

When the native wheel picker is scrolling, host UIs (e.g., a BottomSheet with action buttons) cannot detect that the wheel is still moving. This may cause users to press Confirm while the wheel is still decelerating, resulting in an incorrect or unintended selection.

I’m requesting new APIs to expose the picker’s scroll state, such as:

  • onScrollStart / onScrollEnd callbacks, or
  • a single onScrollingChange(isScrolling: boolean) callback.

This would allow the host to temporarily disable buttons during scrolling to provide a smoother and safer UX.

Why it is needed

  • Prevent accidental confirmation while the wheel is settling.
  • Improve UX in modals and BottomSheets where confirm/cancel actions sit below the picker.
  • Current APIs (onChange) only fire after a value has fully settled — not while scrolling.

Proposed API

Option A — Separate callbacks
<DateTimePicker
  value={value}
  mode="time"
  onChange={handleChange}
  onScrollStart={() => setPickerScrolling(true)}
  onScrollEnd={() => setPickerScrolling(false)}
/>
Option B — Single boolean callback
<DateTimePicker
  value={value}
  onScrollingChange={(isScrolling) => setPickerScrolling(isScrolling)}
/>
Code sample
function BottomSheet() {
  const [value, setValue] = useState(new Date());
  const [scrolling, setScrolling] = useState(false);

  return (
    <>
      <DateTimePicker
        mode="time"
        value={value}
        onChange={(event, newValue) => setValue(newValue)}
        onScrollStart={() => setScrolling(true)}
        onScrollEnd={() => setScrolling(false)}
      />

      <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
        <Button title="Cancel" disabled={scrolling} />
        <Button title="Confirm" disabled={scrolling} />
      </View>
    </>
  );
}
主要语言
JavaScript
星标
2.9k
派生
459
平均合并
4 天 16 小时
30 天内合并 PR
5

环境准备

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

react-native-datetimepicker/datetimepicker 的其他 Issue

查看 react-native-datetimepicker/datetimepicker 的全部 Issue

相似的 Issue

更多 JavaScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。