fix: 修改时间选择组件dateTimepicker,报错组件segmentedControl、slider、incubatorDialog组件 (#6)

Co-authored-by: ZhuXionghui <n037406@archermind.com>

Author: zxh-994

Diff for: src/components/dateTimePicker/useOldApi.ts

@@ -47,18 +47,41 @@ const useOldApi = (props: OldApiProps) => {
             ? dateFormatter(value)
             : dateFormat && moment
               ? moment(value).format(dateFormat)
-              : value.toLocaleDateString();
+              : formatTimestamp(value).formattedDate;
         case 'time':
           return timeFormatter
             ? timeFormatter(value)
             : timeFormat && moment
               ? moment(value).format(timeFormat)
-              : value.toLocaleTimeString();
+              : formatTimestamp(value).formattedTime;
       }
     }
   };
 
   return {getStringValue};
 };
 
+function formatTimestamp(timestamp: any) {
+  const ts = typeof timestamp === 'string' ? Number(timestamp) : timestamp;
+  const date = new Date(ts);
+    
+  if (isNaN(date.getTime())) {
+    return { formattedDate: '', formattedTime: '' };
+  }
+  // const date = new Date(timestamp);
+  
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
+  const day = String(date.getDate()).padStart(2, '0');
+  
+  const hours = String(date.getHours()).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, '0');
+  // const seconds = String(date.getSeconds()).padStart(2, '0');
+
+  const formattedDate = `${year}/${month}/${day}`;
+  const formattedTime = `${hours}:${minutes}`;
+
+  return { formattedDate, formattedTime };
+}
+
 export default useOldApi;

Diff for: src/components/segmentedControl/index.tsx

@@ -204,8 +204,8 @@ const SegmentedControl = (props: SegmentedControlProps) => {
       const isMiddleSelected = !isFirstElementSelected && !isLastElementSelected;
       const insetFix = -CONTAINER_BORDER_WIDTH - (!isFirstElementSelected ? segmentDividerWidth : 1);
       const widthFix = isMiddleSelected ? 2 * segmentDividerWidth : CONTAINER_BORDER_WIDTH + segmentDividerWidth;
-      const inset = withTiming(value[animatedSelectedIndex.value].x + insetFix, TIMING_CONFIG);
-      const width = withTiming(value[animatedSelectedIndex.value].width + widthFix, TIMING_CONFIG);
+      const inset = withTiming(value[animatedSelectedIndex.value]?.x + insetFix, TIMING_CONFIG);
+      const width = withTiming(value[animatedSelectedIndex.value]?.width + widthFix, TIMING_CONFIG);
       return Constants.isRTL ? {width, height, right: inset} : {width, height, left: inset};
     }
     return {};

Diff for: src/components/slider/index.tsx

@@ -367,10 +367,10 @@ class Slider extends PureComponent<InternalSliderProps, State> {
     const newX = Constants.isRTL && !this.disableRTL ? trackSize.width - nativeEvent.locationX : nativeEvent.locationX;
 
     if (useRange) {
-      if (this.isDefaultThumbActive() && this._minThumbStyles?.left && newX < this._minThumbStyles?.left) {
+      if (this.isDefaultThumbActive() && this._minThumbStyles?.left && newX < Number(this._minThumbStyles?.left)) {
         // new x is smaller then min but the active thumb is the max
         this.setActiveThumb(this.minThumb);
-      } else if (!this.isDefaultThumbActive() && this._thumbStyles.left && newX > this._thumbStyles.left) {
+      } else if (!this.isDefaultThumbActive() && this._thumbStyles.left && newX > Number(this._thumbStyles.left)) {
         // new x is bigger then max but the active thumb is the min
         this.setActiveThumb(this.thumb);
       }

Diff for: src/incubator/Dialog/index.tsx

@@ -214,7 +214,7 @@ const Dialog = (props: DialogProps, ref: ForwardedRef<DialogImperativeMethods>)
   const renderDialog = () => (
     <GestureDetector gesture={panGesture}>
       {/* @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881) */}
-      <View {...containerProps} reanimated style={style} onLayout={onLayout} ref={setRef} testID={testID}>
+      <View {...containerProps} style={style} onLayout={onLayout} ref={setRef} testID={testID}>
         {renderDialogContent()}
       </View>
     </GestureDetector>
@@ -228,7 +228,7 @@ const Dialog = (props: DialogProps, ref: ForwardedRef<DialogImperativeMethods>)
   }, [overlayBackgroundColor]);
 
   const renderOverlayView = () => (
-    <View testID={`${testID}.overlayFadingBackground`} absF reanimated style={overlayStyle} pointerEvents="none"/>
+    <View testID={`${testID}.overlayFadingBackground`} absF style={overlayStyle} pointerEvents="none"/>
   );
 
   return (