diff --git a/.changeset/quick-bottles-fly.md b/.changeset/quick-bottles-fly.md new file mode 100644 index 0000000000..783ff8a169 --- /dev/null +++ b/.changeset/quick-bottles-fly.md @@ -0,0 +1,5 @@ +--- +'@td-design/react-native-picker': minor +--- + +fix: 修复picker组件在安卓设备使用物理返回键时的bug diff --git a/packages/react-native-picker/src/components/WheelPicker/index.tsx b/packages/react-native-picker/src/components/WheelPicker/index.tsx index b3b2b0704c..1036333d39 100644 --- a/packages/react-native-picker/src/components/WheelPicker/index.tsx +++ b/packages/react-native-picker/src/components/WheelPicker/index.tsx @@ -171,5 +171,5 @@ const snapPoint = (value: number, velocity: number, points: ReadonlyArray Math.abs(point - p)); const minDelta = Math.min.apply(null, deltas); - return points.filter(p => Math.abs(point - p) === minDelta)[0]; + return points.find(p => Math.abs(point - p) === minDelta) || points[0]; }; diff --git a/packages/react-native-picker/src/date-picker/index.tsx b/packages/react-native-picker/src/date-picker/index.tsx index 7db7b029bf..f2c0fdaa46 100644 --- a/packages/react-native-picker/src/date-picker/index.tsx +++ b/packages/react-native-picker/src/date-picker/index.tsx @@ -39,7 +39,6 @@ const DatePicker = forwardRef((props, ref) => { onChange, value, displayType, - visible, format, }); diff --git a/packages/react-native-picker/src/date-picker/useDatePicker.ts b/packages/react-native-picker/src/date-picker/useDatePicker.ts index 227bd21efa..3af3216039 100644 --- a/packages/react-native-picker/src/date-picker/useDatePicker.ts +++ b/packages/react-native-picker/src/date-picker/useDatePicker.ts @@ -1,5 +1,4 @@ import { useEffect } from 'react'; -import { BackHandler } from 'react-native'; import { useMemoizedFn, useSafeState } from '@td-design/rn-hooks'; import dayjs from 'dayjs'; @@ -11,7 +10,6 @@ export default function useDatePicker({ onChange, value, displayType, - visible, format, }: DatePickerPropsBase & ModalPickerProps) { const [date, setDate] = useSafeState(value ?? new Date()); @@ -20,12 +18,6 @@ export default function useDatePicker({ setDate(value ?? new Date()); }, [value]); - /** 绑定物理返回键监听事件,如果当前picker是打开的,返回键作用是关闭picker,否则返回上一个界面 */ - useEffect(() => { - const sub = BackHandler.addEventListener('hardwareBackPress', () => visible); - return () => sub.remove(); - }, [visible]); - const handleChange = (date?: Date) => { setDate(date); if (displayType === 'view') { diff --git a/packages/react-native-picker/src/picker/components/Cascade/index.tsx b/packages/react-native-picker/src/picker/components/Cascade/index.tsx index 12fc9bccad..3864d54866 100644 --- a/packages/react-native-picker/src/picker/components/Cascade/index.tsx +++ b/packages/react-native-picker/src/picker/components/Cascade/index.tsx @@ -28,7 +28,6 @@ function Cascader({ data, cols, value, - visible, onChange, onClose, }); diff --git a/packages/react-native-picker/src/picker/components/Cascade/useCascader.ts b/packages/react-native-picker/src/picker/components/Cascade/useCascader.ts index 64bdab8341..cc9633b168 100644 --- a/packages/react-native-picker/src/picker/components/Cascade/useCascader.ts +++ b/packages/react-native-picker/src/picker/components/Cascade/useCascader.ts @@ -1,5 +1,4 @@ import { useEffect, useMemo } from 'react'; -import { BackHandler } from 'react-native'; import { useMemoizedFn, useSafeState } from '@td-design/rn-hooks'; import arrayTreeFilter from 'array-tree-filter'; @@ -13,18 +12,9 @@ export default function useCascader({ value, onChange, onClose, - visible, }: Pick, 'data' | 'cols' | 'value' | 'onChange' | 'onClose' | 'visible'>) { const [stateValue, setStateValue] = useSafeState([]); - useEffect(() => { - const listener = BackHandler.addEventListener('hardwareBackPress', () => visible); - - return () => { - listener.remove(); - }; - }, []); - useEffect(() => { const nextValue = generateNextValue(data, value, cols); setStateValue(nextValue); diff --git a/packages/react-native-picker/src/picker/components/Normal/index.tsx b/packages/react-native-picker/src/picker/components/Normal/index.tsx index 8590b389fc..98cf60db50 100644 --- a/packages/react-native-picker/src/picker/components/Normal/index.tsx +++ b/packages/react-native-picker/src/picker/components/Normal/index.tsx @@ -30,7 +30,6 @@ function NormalPicker(props: NormalPickerProps) { initialValue, onChange, onClose, - visible, displayType, }); diff --git a/packages/react-native-picker/src/picker/components/Normal/useNormalPicker.ts b/packages/react-native-picker/src/picker/components/Normal/useNormalPicker.ts index c9145074cd..5c77ed254c 100644 --- a/packages/react-native-picker/src/picker/components/Normal/useNormalPicker.ts +++ b/packages/react-native-picker/src/picker/components/Normal/useNormalPicker.ts @@ -1,5 +1,4 @@ import { useEffect } from 'react'; -import { BackHandler } from 'react-native'; import { useMemoizedFn, useSafeState } from '@td-design/rn-hooks'; @@ -11,7 +10,6 @@ export default function useNormalPicker({ initialValue, onChange, onClose, - visible, displayType, }: Omit, 'data'> & { initialValue?: T }) { const [selectedValue, selectValue] = useSafeState(); @@ -20,12 +18,6 @@ export default function useNormalPicker({ selectValue(value || initialValue); }, [value, initialValue]); - /** 绑定物理返回键监听事件,如果当前picker是打开的,返回键作用是关闭picker,否则返回上一个界面 */ - useEffect(() => { - const sub = BackHandler.addEventListener('hardwareBackPress', () => visible); - return () => sub.remove(); - }, [visible]); - const handleChange = (val: PickerData) => { if (displayType === 'view') { onChange?.(val.value);