@aks-dev/easyui 1.0.195 → 1.0.197

package/dist/components/AnimationModal/AnimationModal.js

@@ -1,18 +1,25 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
+/*
+ * @Author: shiguo
+ * @Date: 2022-05-17 15:22:06
+ * @LastEditors: shiguo
+ * @LastEditTime: 2023-09-27 15:17:15
+ * @FilePath: /@aks-dev/easyui/lib/AnimationModal/AnimationModal.tsx
+ */
 import * as React from "react";
 import { View, Animated, Easing, PanResponder, StyleSheet, useWindowDimensions, BackHandler, } from "react-native";
 import * as utils from "../../utils/lazy";
+// type State = {
+//     display: 'flex' | 'none';
+// }
+// type StateReducerProps = (state: State, action: Partial<State>) => State
 export const AnimationModal = React.forwardRef((props, ref) => {
     const { animationType = "from-bottom", mask = false } = props || {};
     const { height } = useWindowDimensions();
+    // const [state, dispatch] = React.useReducer<StateReducerProps>(
+    //     (state, action) => ({ ...state, ...action }),
+    //     {
+    //         display: 'none'
+    //     })
     const [display, setDisplay] = useCallbackState("none");
     const animatedValue = React.useRef(new Animated.Value(0)).current;
     const timing = (value) => {
@@ -22,14 +29,14 @@ export const AnimationModal = React.forwardRef((props, ref) => {
             useNativeDriver: true,
             easing: Easing.ease,
         }).start(({ finished }) => {
+            /* 动画完成的回调函数 */
         });
     };
     const viewRef = React.useRef(null);
     const layoutRef = React.useRef({ h0: 0, h1: 0 });
     const getLayoutPromise = () => {
         return new Promise((resovle, reject) => {
-            var _a;
-            (_a = viewRef.current) === null || _a === void 0 ? void 0 : _a.measure((...args) => {
+            viewRef.current?.measure((...args) => {
                 if (args.length == 6) {
                     layoutRef.current.h1 = args[3];
                 }
@@ -46,12 +53,11 @@ export const AnimationModal = React.forwardRef((props, ref) => {
     };
     const getData = () => dataRef.current;
     const show = () => {
-        setDisplay("flex", () => __awaiter(void 0, void 0, void 0, function* () {
-            var _a;
-            yield utils.sleep(50);
-            yield getLayoutPromise();
-            timing(-((_a = layoutRef.current) === null || _a === void 0 ? void 0 : _a.h1));
-        }));
+        setDisplay("flex", async () => {
+            await utils.sleep(50);
+            await getLayoutPromise();
+            timing(-layoutRef.current?.h1);
+        });
         return init();
     };
     const hide = () => {
@@ -69,9 +75,9 @@ export const AnimationModal = React.forwardRef((props, ref) => {
             addEventListener.remove();
         };
     }, [display]);
-    return (React.createElement(View, Object.assign({ style: Object.assign({
+    return (<View style={Object.assign({
             display: display,
-        }, styles.container, props.style) }, PanResponder.create({
+        }, styles.container, props.style)} {...PanResponder.create({
         onStartShouldSetPanResponder: (e, gestureState) => {
             let pageY = e.nativeEvent.pageY;
             let topY = height - layoutRef.current.h1;
@@ -81,6 +87,7 @@ export const AnimationModal = React.forwardRef((props, ref) => {
             return false;
         },
         onPanResponderGrant: (e, gestureState) => {
+            // console.log({e})
             let pageY = e.nativeEvent.pageY;
             let topY = height - layoutRef.current.h1;
             if (pageY <= topY && !mask) {
@@ -88,10 +95,18 @@ export const AnimationModal = React.forwardRef((props, ref) => {
                 hide();
             }
         },
-    }).panHandlers),
-        React.createElement(Animated.View, { style: Object.assign({}, styles.wrapper, {
-                transform: [{ translateY: animatedValue }],
-            }), ref: viewRef }, props.children)));
+    }).panHandlers}>
+      <Animated.View style={Object.assign({}, styles.wrapper, {
+            transform: [{ translateY: animatedValue }],
+        })} 
+    // onLayout={e => {
+    //     let target: LayoutRectangle = e.nativeEvent.layout
+    //     layoutRef.current.h1 = target.height
+    // }}
+    ref={viewRef}>
+        {props.children}
+      </Animated.View>
+    </View>);
 });
 const styles = StyleSheet.create({
     container: {
@@ -101,6 +116,7 @@ const styles = StyleSheet.create({
         top: 0,
         bottom: 0,
         zIndex: 999,
+        // display: 'flex',
         flexDirection: "column",
         backgroundColor: "#00000055",
         overflow: "hidden",
@@ -109,12 +125,14 @@ const styles = StyleSheet.create({
         position: "absolute",
         display: "flex",
         flexDirection: "column",
+        // backgroundColor: 'pink',
         width: "100%",
         top: "100%",
     },
     empty: {
         flex: 1,
         position: "relative",
+        //  backgroundColor: 'cyan'
     },
 });
 const useCallbackState = (od) => {

package/dist/components/Badge/Badge.js

@@ -1,15 +1,23 @@
+/*
+ * @Author: shiguo
+ * @Date: 2022-04-21 14:40:29
+ * @LastEditors: shiguo
+ * @LastEditTime: 2022-07-08 15:40:21
+ * @FilePath: /@aks-dev/easyui/lib/Badge/Badge.tsx
+ */
 import React from "react";
 import { View, Text } from "react-native";
 import { px2dp } from "../../screen/px2dp";
 import { px2sp } from "../../screen/px2sp";
 export const Badge = (props) => {
     if (isNaN(+props.count) || Number(props.count) == 0)
-        return React.createElement(View, null);
-    return (React.createElement(View, { style: [
+        return <View />;
+    return (<View style={[
             {
                 flexGrow: 0,
                 flexShrink: 1,
                 zIndex: 1,
+                // paddingHorizontal: px2dp(0),
                 height: px2dp(16),
                 minWidth: px2dp(16),
                 borderRadius: px2dp(8),
@@ -18,9 +26,10 @@ export const Badge = (props) => {
                 backgroundColor: "red",
             },
             props.style,
-        ] },
-        React.createElement(Text, { style: { fontSize: px2sp(12), color: "white", textAlign: "center" } },
-            " ",
-            Number(props.count) > 99 ? "+99" : props.count,
-            " ")));
+        ]}>
+      <Text style={{ fontSize: px2sp(12), color: "white", textAlign: "center" }}>
+        {" "}
+        {Number(props.count) > 99 ? "+99" : props.count}{" "}
+      </Text>
+    </View>);
 };

package/dist/components/DottedLine/DottedLine.js

@@ -1,22 +1,27 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+/*
+ * @Author: shiguo
+ * @Date: 2022-07-12 15:30:19
+ * @LastEditors: shiguo
+ * @LastEditTime: 2022-07-12 15:33:06
+ * @FilePath: /@aks-dev/easyui/lib/DottedLine/DottedLine.tsx
+ */
 import React from "react";
 import { StyleSheet, View } from "react-native";
 export default (props) => {
-    const { vertical = false, dottedColor, dottedCount = 200 } = props, rest = __rest(props, ["vertical", "dottedColor", "dottedCount"]);
+    const { vertical = false, dottedColor, dottedCount = 200, ...rest } = props;
     const arrs = Array.from({ length: dottedCount }, (k, v) => v);
-    return (React.createElement(View, { style: Object.assign(Object.assign(Object.assign({}, styles.container), { flexDirection: vertical ? "column" : "row" }), rest.style) }, arrs.map((item, index) => {
-        return (React.createElement(View, { key: `dotted-${index}`, style: Object.assign(Object.assign({}, (vertical ? styles.dotted_vertical : styles.dotted_horizontal)), (dottedColor && { backgroundColor: dottedColor })) }));
-    })));
+    return (<View style={{
+            ...styles.container,
+            flexDirection: vertical ? "column" : "row",
+            ...rest.style,
+        }}>
+      {arrs.map((item, index) => {
+            return (<View key={`dotted-${index}`} style={{
+                    ...(vertical ? styles.dotted_vertical : styles.dotted_horizontal),
+                    ...(dottedColor && { backgroundColor: dottedColor }),
+                }}/>);
+        })}
+    </View>);
 };
 const styles = StyleSheet.create({
     container: {

package/dist/components/Echarts/EchartsView.js

@@ -1,18 +1,16 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
+/*
+ * @Author: shiguo
+ * @Date: 2022-05-05 14:52:53
+ * @LastEditors: shiguo
+ * @LastEditTime: 2023-01-03 17:50:43
+ * @FilePath: /@aks-dev/easyui/lib/Echarts/EchartsView.tsx
+ */
 import * as React from "react";
 import { StyleSheet, View, } from "react-native";
 import { WebView } from "react-native-webview";
 import { getHtml, toString } from "./helper";
+// type Reducer = (prevState: State, action: Partial<State>) => State;
 const EchartsView = (props) => {
-    var _a, _b;
     const [state, dispatch] = React.useReducer((prevState, ...args) => Object.assign({}, prevState, ...args), {
         width: 0,
         height: 0,
@@ -23,8 +21,7 @@ const EchartsView = (props) => {
     const rootView = React.useRef({ pageX: 0, pageY: 0, width: 0, height: 0 });
     const getRootViewlayoutPromise = () => {
         return new Promise((resovle, reject) => {
-            var _a;
-            (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.measure((...args) => {
+            containerRef.current?.measure((...args) => {
                 if (args.length == 6) {
                     rootView.current = {
                         width: args[2],
@@ -33,15 +30,15 @@ const EchartsView = (props) => {
                         pageY: args[5],
                     };
                 }
+                // console.log('RootView', rootView.current)
                 resovle(args);
             });
         });
     };
     React.useLayoutEffect(() => {
-        (() => __awaiter(void 0, void 0, void 0, function* () {
-            var _a;
+        (async () => {
             if (state.isLoaded) {
-                yield getRootViewlayoutPromise();
+                await getRootViewlayoutPromise();
                 let height = rootView.current.height
                     ? `${rootView.current.height}px`
                     : "auto";
@@ -60,9 +57,8 @@ const EchartsView = (props) => {
                     instance.setOption(${toString(props.option)});
                 })();
                 `;
-                (_a = WebViewRef.current) === null || _a === void 0 ? void 0 : _a.injectJavaScript(run);
+                WebViewRef.current?.injectJavaScript(run);
                 return () => {
-                    var _a;
                     const run = `
                     ;(function() {
                         var instance = echarts.getInstanceByDom(document.getElementById('main'));
@@ -72,35 +68,75 @@ const EchartsView = (props) => {
                         }
                     })();
                     `;
-                    (_a = WebViewRef.current) === null || _a === void 0 ? void 0 : _a.injectJavaScript(run);
+                    WebViewRef.current?.injectJavaScript(run);
                 };
             }
             return undefined;
-        }))().catch((err) => {
+        })().catch((err) => {
             console.log(err);
         });
     }, [props.option, state.isLoaded]);
-    return (React.createElement(View, { style: [styles.container, props.style], ref: containerRef },
-        React.createElement(WebView, { ref: WebViewRef, originWhitelist: ["*"], useWebKit: true, allowUniversalAccessFromFileURLs: true, geolocationEnabled: true, mixedContentMode: "always", renderLoading: () => {
-                var _a;
-                if (props.renderLoading)
-                    return props.renderLoading();
-                return (React.createElement(View, { style: {
-                        backgroundColor: ((_a = props.style) === null || _a === void 0 ? void 0 : _a.backgroundColor) || "transparent",
-                    } }));
-            }, style: {
-                backgroundColor: ((_a = props.style) === null || _a === void 0 ? void 0 : _a.backgroundColor) || "transparent",
-                opacity: 0.99,
-            }, scrollEnabled: false, javaScriptEnabled: true, startInLoadingState: false, onLoadEnd: (_) => {
-                dispatch({ isLoaded: true });
-            }, onError: (e) => {
-                console.log("onError", e);
-            }, source: {
-                baseUrl: "",
-                html: getHtml({
-                    backgroundColor: ((_b = props.style) === null || _b === void 0 ? void 0 : _b.backgroundColor) || "transparent",
-                }),
-            } })));
+    // const injectedJavaScript = (): string => {
+    //     console.log('injectedJavaScript', props.option.xAxis.data)
+    //     let height = state.height ? `${state.height}px` : 'auto'
+    //     let width = state.width ? `${state.width}px` : 'auto'
+    //     return `
+    //             ;(function() {
+    //                 document.getElementById('main').style.height = "${height}";
+    //                 document.getElementById('main').style.width = "${width}";
+    //                 var instance = echarts.getInstanceByDom(document.getElementById('main'));
+    //                 if(instance == null){
+    //                      instance = echarts.init(document.getElementById('main'));
+    //                 }
+    //                 instance.clear();
+    //                 instance.setOption(${toString(props.option)});
+    //                 instance.on('click', function(params) {
+    //                     var seen = [];
+    //                     var paramsString = JSON.stringify(params, function(key, val) {
+    //                     if (val != null && typeof val == "object") {
+    //                         if (seen.indexOf(val) >= 0) {
+    //                         return;
+    //                         }
+    //                         seen.push(val);
+    //                     }
+    //                     return val;
+    //                     });
+    //                    // window.ReactNativeWebView.postMessage(JSON.stringify({"types":"ON_PRESS","payload": paramsString}));
+    //                 });
+    //             })();
+    //             `
+    // }
+    return (<View style={[styles.container, props.style]} ref={containerRef}>
+      <WebView ref={WebViewRef} originWhitelist={["*"]} useWebKit={true} // ios使用最新webkit内核渲染
+     allowUniversalAccessFromFileURLs={true} geolocationEnabled={true} mixedContentMode={"always"} renderLoading={() => {
+            if (props.renderLoading)
+                return props.renderLoading();
+            return (<View style={{
+                    backgroundColor: props.style?.backgroundColor || "transparent",
+                }}/>);
+        }} // 设置空View，修复ioswebview闪白
+     style={{
+            backgroundColor: props.style?.backgroundColor || "transparent",
+            opacity: 0.99, //解决闪退的办法
+        }} // 设置背景色透明，修复android闪白
+     scrollEnabled={false} 
+    // onMessage={e=>{
+    //     console.log(e)
+    // }}
+    javaScriptEnabled={true} 
+    // injectedJavaScript={injectedJavaScript()}
+    startInLoadingState={false} onLoadEnd={(_) => {
+            dispatch({ isLoaded: true });
+            // console.log('onLoadEnd')
+        }} onError={(e) => {
+            console.log("onError", e);
+        }} source={{
+            baseUrl: "",
+            html: getHtml({
+                backgroundColor: props.style?.backgroundColor || "transparent",
+            }),
+        }}/>
+    </View>);
 };
 const styles = StyleSheet.create({
     container: {
@@ -110,5 +146,6 @@ const styles = StyleSheet.create({
     },
 });
 export default EchartsView;
+// React.memo(EchartsView)
 import * as echarts from "echarts/core";
 export { echarts };

package/dist/components/Echarts/helper.js

@@ -1,3 +1,10 @@
+/*
+ * @Author: shiguo
+ * @Date: 2022-05-05 15:56:21
+ * @LastEditors: shiguo
+ * @LastEditTime: 2023-01-03 17:02:57
+ * @FilePath: /@aks-dev/easyui/lib/Echarts/helper.tsx
+ */
 export const getHtml = (props) => {
     return `
       <!DOCTYPE html>
@@ -35,15 +42,23 @@ export const getHtml = (props) => {
       </html>
       `;
 };
+/**
+ * https://res.actiiot.com/echarts/5.0.2/echarts.min.js
+ *
+ * https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.1/echarts.min.js
+ */
 export const toString = (obj) => {
     let result = JSON.stringify(obj, function (key, val) {
+        // 对function进行特殊处理
         if (typeof val === 'function') {
             return `~ha~${val}~ha~`;
         }
         return val;
     });
+    // 再进行还原
     do {
-        result = result.replace('\"~ha~', '').replace('~ha~\"', '').replace(/\\\"/g, "\"");
+        result = result.replace('\"~ha~', '').replace('~ha~\"', '').replace(/\\\"/g, "\""); //最后一个replace将release模式中莫名生成的\"转换成"
     } while (result.indexOf('~ha~') >= 0);
     return result;
 };
+///.replace(/\\n/g, '')

package/dist/components/Hud/AlertBottomView/AlertBottomView.js

@@ -1,12 +1,3 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 import * as React from "react";
 import { View, Text, StyleSheet, Platform, StatusBar, TouchableOpacity, Dimensions, } from "react-native";
 import Modal from "react-native-modal";
@@ -22,16 +13,16 @@ export default React.forwardRef((_, ref) => {
     const cancelCallbackRef = React.useRef(undefined);
     const confirmCallbackRef = React.useRef(undefined);
     React.useImperativeHandle(ref, () => ({
-        show: (options) => __awaiter(void 0, void 0, void 0, function* () {
+        show: async (options) => {
             setState(Object.assign({}, defaultState, { visible: true }, options));
             cancelCallbackRef.current = options.cancel;
             confirmCallbackRef.current = options.confirm;
-        }),
+        },
         hide,
     }), []);
-    const hide = () => __awaiter(void 0, void 0, void 0, function* () {
+    const hide = async () => {
         setState(defaultState);
-    });
+    };
     React.useEffect(() => {
         if (Platform.OS == "android") {
             if (state.visible) {
@@ -44,48 +35,69 @@ export default React.forwardRef((_, ref) => {
             }
         }
     }, [state.visible]);
-    return (React.createElement(Modal, { hideModalContentWhileAnimating: true, useNativeDriver: true, animationIn: "slideInUp", animationOut: "slideOutDown", onBackButtonPress: () => {
+    return (<Modal hideModalContentWhileAnimating={true} //通过隐藏模态内容直到动画完成来增强性能
+     useNativeDriver={true} //定义动画是否应使用本机驱动程序
+     animationIn="slideInUp" animationOut="slideOutDown" onBackButtonPress={() => {
+            //按下Android后退按钮时调用
             hide();
-        }, onBackdropPress: () => {
+        }} onBackdropPress={() => {
+            //按下背景时调用
             hide();
-        }, isVisible: state.visible, style: { margin: 0 }, deviceHeight: Dimensions.get("screen").height },
-        React.createElement(View, { style: styles.container },
-            React.createElement(View, { style: [styles.wrapper, state.wrapperStyle] },
-                state.title && React.createElement(Text, { style: styles.titleText }, state.title),
-                React.createElement(View, { style: [state.contentContainerStyle] }, (() => {
-                    if (typeof state.content == "string")
-                        return React.createElement(Text, { style: styles.contentText }, state.content);
-                    if (React.isValidElement(state.content))
-                        return state.content;
-                    return React.createElement(View, null);
-                })()),
-                (state.cancelText || state.confirmText) && (React.createElement(View, { style: styles.action },
-                    state.cancelText && (React.createElement(TouchableOpacity, { style: [
-                            styles.cancel,
-                            { marginRight: state.confirmText ? px2dp(15) : 0 },
-                            state.cancelContainerStyle,
-                        ], activeOpacity: 0.8, onPress: () => {
-                            hide();
-                            cancelCallbackRef.current && cancelCallbackRef.current();
-                            cancelCallbackRef.current = undefined;
-                        } },
-                        React.createElement(Text, { style: [styles.cancelText, state.cancelTextStyle] }, state.cancelText))),
-                    state.confirmText && (React.createElement(TouchableOpacity, { style: [
-                            styles.confirm,
-                            { marginLeft: state.cancelText ? px2dp(15) : 0 },
-                            state.confirmContainerStyle,
-                        ], activeOpacity: 0.8, onPress: () => {
-                            hide();
-                            confirmCallbackRef.current && confirmCallbackRef.current();
-                            confirmCallbackRef.current = undefined;
-                        } },
-                        React.createElement(Text, { style: [styles.confirmText, state.confirmTextStyle] }, state.confirmText)))))))));
+        }} isVisible={state.visible} style={{ margin: 0 }} deviceHeight={Dimensions.get("screen").height}>
+      <View style={styles.container}>
+        <View style={[styles.wrapper, state.wrapperStyle]}>
+          {state.title && <Text style={styles.titleText}>{state.title}</Text>}
+          <View style={[state.contentContainerStyle]}>
+            {(() => {
+            if (typeof state.content == "string")
+                return <Text style={styles.contentText}>{state.content}</Text>;
+            if (React.isValidElement(state.content))
+                return state.content;
+            return <View />;
+        })()}
+          </View>
+          {(state.cancelText || state.confirmText) && (<View style={styles.action}>
+              {state.cancelText && (<TouchableOpacity style={[
+                    styles.cancel,
+                    { marginRight: state.confirmText ? px2dp(15) : 0 },
+                    state.cancelContainerStyle,
+                ]} activeOpacity={0.8} onPress={() => {
+                    hide();
+                    cancelCallbackRef.current && cancelCallbackRef.current();
+                    cancelCallbackRef.current = undefined;
+                }}>
+                  <Text style={[styles.cancelText, state.cancelTextStyle]}>
+                    {state.cancelText}
+                  </Text>
+                </TouchableOpacity>)}
+
+              {state.confirmText && (<TouchableOpacity style={[
+                    styles.confirm,
+                    { marginLeft: state.cancelText ? px2dp(15) : 0 },
+                    state.confirmContainerStyle,
+                ]} activeOpacity={0.8} onPress={() => {
+                    hide();
+                    confirmCallbackRef.current && confirmCallbackRef.current();
+                    confirmCallbackRef.current = undefined;
+                }}>
+                  <Text style={[styles.confirmText, state.confirmTextStyle]}>
+                    {state.confirmText}
+                  </Text>
+                </TouchableOpacity>)}
+            </View>)}
+        </View>
+      </View>
+    </Modal>);
 });
 export const alertBottomViewRef = React.createRef();
 export const showAlertBottomModal = (props) => {
-    var _a;
-    (_a = alertBottomViewRef.current) === null || _a === void 0 ? void 0 : _a.show(props);
+    alertBottomViewRef.current?.show(props);
 };
+// const sleep = (msec?: number) => {
+//     return new Promise(resolve => {
+//         setTimeout(resolve, msec || 350);
+//     });
+// }
 const styles = StyleSheet.create({
     container: {
         display: "flex",
@@ -108,6 +120,7 @@ const styles = StyleSheet.create({
         maxWidth: deviceWidth - px2dp(30),
         fontSize: px2sp(18),
         marginBottom: px2dp(20),
+        // backgroundColor: 'red',
         textAlign: "center",
         fontWeight: "bold",
         color: "#1A1A1A",
@@ -120,6 +133,7 @@ const styles = StyleSheet.create({
         flexShrink: 1,
         width: undefined,
         fontSize: px2sp(15),
+        // backgroundColor: 'red',
         color: "#1A1A1A",
         textAlign: "center",
     },
@@ -128,6 +142,7 @@ const styles = StyleSheet.create({
         flexDirection: "row",
         justifyContent: "space-between",
         alignItems: "center",
+        // backgroundColor:"red"
     },
     cancel: {
         width: "40%",