feat:样式兼容问题以及错误提示

wuba · Mar 18, 2024 · fbd11a4 · fbd11a4
1 parent 6c76218
commit fbd11a4
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 89 deletions.
diff --git a/packages/taro-rn/src/lib/Popup.tsx b/packages/taro-rn/src/lib/Popup.tsx
@@ -32,14 +32,14 @@ class Popup extends Component<any, any> {
 
   height
   popup
-
-  constructor (props:Props) {
+  timer
+  constructor(props: Props) {
     super(props)
     this.state = { visible: props.visible ?? false, translateY: new Animated.Value(height) }
     this.handleLayout = this.handleLayout.bind(this)
   }
 
-  UNSAFE_componentWillReceiveProps (nextProp:Props):void {
+  UNSAFE_componentWillReceiveProps (nextProp: Props): void {
     if (this.props.visible !== nextProp.visible) {
       if (nextProp.visible) {
         this.setState({ visible: true })
@@ -53,21 +53,26 @@ class Popup extends Component<any, any> {
       }).start(() => this.setState({ visible: false }))
     }
   }
-
-  handleLayout ():void {
-    this.popup.measure((_x, _y, _w, h) => {
-      this.height = h
-      this.setState({ translateY: new Animated.Value(h) })
-      Animated.timing(this.state.translateY, {
-        toValue: 0,
-        duration: 300,
-        easing: (Easing as any).easeInOut,
-        useNativeDriver: true
-      }).start()
-    })
+  componentWillUnmount (): void {
+    this.timer && clearTimeout(this.timer);
+  }
+  handleLayout (): void {
+    this.timer = setTimeout(() => {
+      this.popup?.measure((_x, _y, _w, h) => {
+        this.height = h
+        this.setState({ translateY: new Animated.Value(h) }, () => {
+          Animated.timing(this.state.translateY, {
+            toValue: 0,
+            duration: 300,
+            easing: (Easing as any).easeInOut,
+            useNativeDriver: true
+          }).start()
+        })
+      })
+    },); // 处理鸿蒙系统handleLayout 回调 this.popup为空的情况
   }
 
-  render ():JSX.Element {
+  render (): JSX.Element {
     const {
       style,
       maskStyle,

diff --git a/packages/taro-rn/src/lib/showActionSheet/ActionSheet.tsx b/packages/taro-rn/src/lib/showActionSheet/ActionSheet.tsx
@@ -13,19 +13,14 @@ import { Popup } from '../Popup'
 import V from '../variable'
 
 const styles = StyleSheet.create({
-  iosActionsheet: {
+  actionsheet: {
     backgroundColor: V.weuiBgColorDefault
   },
   androidActionsheetWrapper: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center'
   },
-  androidActionsheet: {
-    width: 274,
-    backgroundColor: V.weuiBgColorDefault,
-    borderRadius: V.weuiActionSheetAndroidBorderRadius
-  },
   actionsheetMenu: {
     backgroundColor: '#fff'
   },
@@ -36,29 +31,23 @@ const styles = StyleSheet.create({
   actionsheetCell: {
     borderTopWidth: StyleSheet.hairlineWidth,
     borderColor: V.weuiCellBorderColor,
-    borderStyle: 'solid'
-  },
-  iosActionsheetCell: {
+    borderStyle: 'solid',
     paddingTop: 10,
-    paddingBottom: 10
-  },
-  androidActionsheetCell: {
-    paddingTop: 13,
-    paddingBottom: 13,
+    paddingBottom: 10,
     paddingLeft: 24,
     paddingRight: 24
   },
+
   firstActionsheetCell: {
     borderTopWidth: 0
   },
-  iosActionsheetCellText: {
+  actionSheetCellText: {
     textAlign: 'center',
     fontSize: 18,
     marginTop: ((18 * V.baseLineHeight) - 18) / 2,
     marginBottom: ((18 * V.baseLineHeight) - 18) / 2
   },
   androidActionsheetCellText: {
-    textAlign: 'center',
     fontSize: 16,
     marginTop: ((16 * 1.4) - 16) / 2,
     marginBottom: ((16 * 1.4) - 16) / 2
@@ -105,14 +94,15 @@ const Index: React.FC<any> = ({
         underlayColor={underlayColor}
         style={[
           styles.actionsheetCell,
-          styles[`${_type}ActionsheetCell`],
           idx === 0 ? styles.firstActionsheetCell : {},
           btnStyle
         ]}
         {...others}
       >
         <Text
           style={[
+
+            styles.actionSheetCellText,
             styles[`${_type}ActionsheetCellText`],
             styles[`${btnType}ActionsheetCellText`],
             textStyle
@@ -128,14 +118,14 @@ const Index: React.FC<any> = ({
         underlayColor={underlayColor}
         style={[
           styles.actionsheetCell,
-          styles[`${_type}ActionsheetCell`],
           idx === 0 ? styles.firstActionsheetCell : {},
           btnStyle
         ]}
         {...others}
       >
         <Text
           style={[
+            styles.actionSheetCellText,
             styles[`${_type}ActionsheetCellText`],
             styles[`${btnType}ActionsheetCellText`],
             textStyle
@@ -145,29 +135,29 @@ const Index: React.FC<any> = ({
     )
 
   return <Popup
-      visible={visible}
-      style={[styles.iosActionsheet, style]}
-      maskStyle={maskStyle}
-      onShow={onShow}
-      onClose={onClose}
-    >
-      {menus.length
-        ? <View style={[styles.actionsheetMenu]}>
-          {_renderMenuItems()}
-        </View>
-        : false}
-      {actions.length
-        ? <View style={[styles.actionsheetAction]}>
-          {_renderActions()}
-        </View>
-        : false}
-      <View style={{paddingBottom: Math.max(initialWindowMetrics?.insets.bottom || 0, 16), backgroundColor: '#fff'}}></View>
-    </Popup>
+    visible={visible}
+    style={[styles.actionsheet, style]}
+    maskStyle={maskStyle}
+    onShow={onShow}
+    onClose={onClose}
+  >
+    {menus.length
+      ? <View style={[styles.actionsheetMenu]}>
+        {_renderMenuItems()}
+      </View>
+      : false}
+    {actions.length
+      ? <View style={[styles.actionsheetAction]}>
+        {_renderActions()}
+      </View>
+      : false}
+    <View style={{ paddingBottom: Math.max(initialWindowMetrics?.insets.bottom || 0, 16), backgroundColor: '#fff' }}></View>
+  </Popup>
 }
 
 Index.propTypes = {
   autoDectect: PropTypes.bool,
-  type: PropTypes.oneOf(['ios', 'android']),
+  type: PropTypes.oneOf(['ios', 'android', 'harmony']),
   menus: PropTypes.any,
   actions: PropTypes.any,
   visible: PropTypes.bool,

diff --git a/packages/taro-rn/src/lib/showModal/Dialog.tsx b/packages/taro-rn/src/lib/showModal/Dialog.tsx
@@ -33,49 +33,42 @@ const styles = create({
     paddingRight: V.weuiDialogGapWidth
   },
   dialogTitle: {
-    fontWeight: '400'
-  },
-  iosDialogTitle: {
-    fontSize: 18,
+    fontWeight: '700',
+    fontSize: 17,
     textAlign: 'center'
   },
+
   androidDialogTitle: {
     fontSize: 21,
     textAlign: 'left'
   },
+
   dialogBody: {
     paddingLeft: V.weuiDialogGapWidth,
-    paddingRight: V.weuiDialogGapWidth
-  },
-  iosDialogBody: {
-    paddingBottom: (0.8 * 15) + 20
-  },
-  androidDialogBody: {
-    paddingTop: 0.25 * 17,
-    paddingBottom: (17 * 2) + 20
+    paddingRight: V.weuiDialogGapWidth,
+    marginBottom: 32
   },
+
   dialogBodyText: {
     color: V.weuiTextColorGray,
-    lineHeight: 15 * 1.3,
+    fontSize: 17,
+    textAlign: 'center',
+    lineHeight: 17 * 1.4,
     android: {
-      lineHeight: Math.round(15 * 1.3)
+      lineHeight: Math.round(17 * 1.4)
     }
   },
-  iosDialogBodyText: {
-    fontSize: 15,
-    textAlign: 'center'
-  },
+
   androidDialogBodyText: {
-    fontSize: 17,
     textAlign: 'left'
   },
   dialogFooter: {
-    flexDirection: 'row'
-  },
-  iosDialogFooter: {
+    flexDirection: 'row',
     height: 48,
     alignItems: 'center',
     justifyContent: 'center',
+  },
+  dialogFooterBorder: {
     borderTopWidth: StyleSheet.hairlineWidth,
     borderColor: V.weuiDialogLineColor,
     borderStyle: 'solid'
@@ -90,17 +83,16 @@ const styles = create({
   },
   dialogFooterOpr: {
     alignItems: 'center',
-    justifyContent: 'center'
-  },
-  iosDialogFooterOpr: {
+    justifyContent: 'center',
     height: 48,
-    flex: 1
+    flex: 1,
   },
   androidDialogFooterOpr: {
     height: 42,
     paddingLeft: 16 * 0.8,
     paddingRight: 16 * 0.8
   },
+
   dialogFooterOprWithNegativeMarginRight: {
     marginRight: 0 - (16 * 0.8)
   },
@@ -109,12 +101,13 @@ const styles = create({
     borderColor: V.weuiDialogLineColor,
     borderStyle: 'solid'
   },
-  iosDialogFooterOprText: {
+  dialogFooterOprText: {
     fontSize: 18
   },
   androidDialogFooterOprText: {
     fontSize: 16
   },
+
   defaultDialogFooterOprText: {
     color: '#353535'
   },
@@ -170,14 +163,15 @@ const Index: React.FC<any> = (
         style={[
           styles.dialogFooterOpr,
           styles[`${_type}DialogFooterOpr`],
-          _type === 'ios' && idx > 0 ? styles.dialogFooterOprWithBorder : {},
-          _type === 'android' && idx === buttons.length - 1 ? styles.dialogFooterOprWithNegativeMarginRight : {}
+          _type === 'android' && idx === buttons.length - 1 ? styles.dialogFooterOprWithNegativeMarginRight : (
+            idx > 0 ? styles.dialogFooterOprWithBorder : {}
+          ),
         ]}
         underlayColor={underlayColor}
         {...others}
       >
         <Text
-          style={[styles[`${_type}DialogFooterOprText`], { color: btnType }]}
+          style={[styles.dialogFooterOprText, styles[`${_type}DialogFooterOprText`], { color: btnType }]}
         >{label}</Text>
       </TouchableHighlight>
     )
@@ -200,10 +194,10 @@ const Index: React.FC<any> = (
           <View style={[styles.dialogHeader, headerStyle]}>
             <Text style={[styles.dialogTitle, styles[`${_type}DialogTitle`], titleStyle]}>{title}</Text>
           </View>
-          <View style={[styles.dialogBody, styles[`${_type}DialogBody`], bodyStyle]}>
+          <View style={[styles.dialogBody, bodyStyle]}>
             {childrenWithProps}
           </View>
-          <View style={[styles.dialogFooter, styles[`${_type}DialogFooter`], footerStyle]}>
+          <View style={[styles.dialogFooter, styles[`${_type}DialogFooter`], _type !== 'android' ? styles.dialogFooterBorder : {}, footerStyle]}>
             {_renderButtons()}
           </View>
         </View>
@@ -214,7 +208,7 @@ const Index: React.FC<any> = (
 
 Index.propTypes = {
   autoDectect: PropTypes.bool,
-  type: PropTypes.oneOf(['ios', 'android']),
+  type: PropTypes.oneOf(['ios', 'android', 'harmony']),
   title: PropTypes.string,
   buttons: PropTypes.arrayOf(PropTypes.object),
   visible: PropTypes.bool,

diff --git a/packages/taro-rn/src/lib/showModal/toast.tsx b/packages/taro-rn/src/lib/showModal/toast.tsx
@@ -118,7 +118,7 @@ function showToast (options: Taro.showToast.Option): Promise<TaroGeneral.Callbac
     return Promise.reject(res)
   }
 
-  let {title = '', icon = 'success', image, duration = 1500, mask = false, success, fail, complete} = options || {} // eslint-disable-line
+  let { title = '', icon = 'success', image, duration = 1500, mask = false, success, fail, complete } = options || {} // eslint-disable-line
 
   const isLoading = (icon === 'loading')
 
@@ -138,7 +138,7 @@ function showToast (options: Taro.showToast.Option): Promise<TaroGeneral.Callbac
       </View>
     </View>
   } else if (isLoading) {
-    ToastView = <WXLoading title={title} mask={mask}/>
+    ToastView = <WXLoading title={title} mask={mask} />
   } else if (icon === 'none') {
     ToastView = <View style={maskStyle}>
       <View style={styles.textGrayBlock}>
@@ -177,7 +177,7 @@ function showToast (options: Taro.showToast.Option): Promise<TaroGeneral.Callbac
   }
 }
 
-function showLoading (options: Taro.showLoading.Option): Promise<TaroGeneral.CallbackResult> {
+function showLoading (options: Taro.showLoading.Option = { title: "加载中" }): Promise<TaroGeneral.CallbackResult> {
   const isObject = shouldBeObject(options)
   if (!isObject.res) {
     const res = { errMsg: `showLoading${isObject.msg}` }