@aks-dev/easyui 1.0.163 → 1.1.2

package/dist/components/MutiPictureView/MutiPictureView.js

@@ -0,0 +1,239 @@
+/*
+ * @Author: OBKoro1
+ * @Date: 2022-04-24 17:38:27
+ * @LastEditors: shiguo
+ * @LastEditTime: 2022-11-14 11:33:33
+ * @FilePath: /@aks-dev/easyui/lib/MutiPictureView/MutiPictureView.tsx
+ */
+import * as React from "react";
+import { Image, View, StyleSheet, Keyboard, TouchableOpacity, Text, } from "react-native";
+import { px2dp } from "../../screen/px2dp";
+import { px2sp } from "../../screen/px2sp";
+import SYImagePicker from "@aks-dev/react-native-syan-image-picker";
+let icon_add_image = require("./assets/icon_add_image.png");
+let icon_del_image = require("./assets/icon_del_image.png");
+const MutiPictureView = (props) => {
+    const { bind, maxCount = 6, type = "showImagePicker", addIcon, addIconStyle, addIconContainerStyle, //borderWidth: 1, borderStyle: 'dashed', borderColor: assets.color_A3A9CC  虚线框
+    itemContainerStyle, emptyPlaceHolderStyle, delIcon, delIconStyle, spacingHorizontal = px2dp(15), spacingInner = px2dp(8), editable = true, showEmptyPlaceHolder = false, } = props;
+    const { viewModel, setViewModel } = bind;
+    React.useEffect(() => { }, []);
+    const [sideLength, setSideLength] = React.useState(0);
+    const addPhoto = () => {
+        let images = viewModel.photos || [];
+        if (!images) {
+            throw new Error("viewModel没有定义photos字段");
+        }
+        if (type == "showImagePicker") {
+            SYImagePicker.showImagePicker({
+                imageCount: maxCount - (viewModel.photos?.length || 0),
+                isCrop: false,
+                isRecordSelected: false,
+                quality: 20,
+            }, (err, photos) => {
+                if (!err) {
+                    let imgs = photos.map((it) => {
+                        return { uri: it.uri };
+                    });
+                    images = images.concat(imgs);
+                    setViewModel({ photos: images });
+                }
+            });
+        }
+        if (type == "openCamera") {
+            SYImagePicker.openCamera({
+                imageCount: maxCount - (viewModel.photos?.length || 0),
+                isCrop: false,
+                isRecordSelected: false,
+                quality: 20,
+            }, (err, photos) => {
+                if (!err) {
+                    let imgs = photos.map((it) => {
+                        return { uri: it.uri };
+                    });
+                    images = images.concat(imgs);
+                    setViewModel({ photos: images });
+                }
+                else {
+                    console.log("打开相机失败");
+                }
+            });
+        }
+    };
+    const deletePhoto = (index) => {
+        Keyboard.dismiss();
+        let photos = [...(viewModel.photos || [])];
+        photos.splice(index, 1);
+        setViewModel({ photos: photos });
+    };
+    const showPhoto = (index) => {
+        Keyboard.dismiss();
+        let imgs = (props.value || viewModel.photos)?.filter((it) => {
+            return ((typeof it === "string" && it.indexOf("http") >= 0) ||
+                typeof it == "object");
+        }) || [];
+        let images = [];
+        // console.log('viewModel', viewModel, imgs)
+        imgs.forEach((it) => {
+            if (typeof it === "string") {
+                images.push({ uri: it });
+            }
+            else {
+                images.push(it);
+            }
+        });
+        setViewModel({
+            imageViewer: {
+                imageUrls: images.map((it) => {
+                    return it.uri;
+                }),
+                index: index,
+                visible: true,
+            },
+        });
+    };
+    const ItemView = ({ source, index, }) => {
+        return (<TouchableOpacity style={[
+                styles.item_container,
+                itemContainerStyle,
+                {
+                    marginTop: index < 3 ? 0 : spacingInner,
+                    marginLeft: index % 3 == 0 ? spacingHorizontal : spacingInner,
+                    width: sideLength,
+                    height: sideLength,
+                },
+            ]} activeOpacity={0.8} onPress={() => showPhoto(index)}>
+        <Image source={source} style={{ width: "100%", height: "100%" }} resizeMode="cover"/>
+        {editable && !props.value && (<TouchableOpacity onPress={() => deletePhoto(index)} style={[styles.del_img_container, delIconStyle]}>
+            <Image source={delIcon ? delIcon : icon_del_image} resizeMode="contain" style={{ width: "100%", height: "100%" }}/>
+          </TouchableOpacity>)}
+      </TouchableOpacity>);
+    };
+    const containerRef = React.useRef(null);
+    React.useEffect(() => {
+        containerRef.current?.measure((...args) => {
+            // console.log('measure', args[2])
+            if (args.length > 3) {
+                let _sideLength = +((args[2] - spacingHorizontal * 2 - spacingInner * 2) /
+                    3).toFixed(1);
+                setSideLength(_sideLength - 0.1);
+            }
+        });
+    });
+    if (props.value && props.value?.length > 0) {
+        return (<View style={[styles.container, props.style]} ref={containerRef}>
+        {props.value instanceof Array &&
+                props.value?.map((item, index) => {
+                    return (<ItemView key={index} source={typeof item === "string" ? { uri: item } : item} index={index}/>);
+                })}
+
+        {showEmptyPlaceHolder &&
+                maxCount - (props.value?.length || 0) - 1 > 0 &&
+                Array.from({
+                    length: maxCount - (props.value?.length || 0) - (editable ? 1 : 0),
+                }, (_, k) => (<View key={`sg-showEmptyPlaceHolder-${k}`} style={[
+                        styles.empty_place_container,
+                        emptyPlaceHolderStyle,
+                        itemContainerStyle,
+                        {
+                            marginTop: k + (editable ? 1 : 0) + (props.value?.length || 0) > 2
+                                ? spacingInner
+                                : 0,
+                            marginLeft: (k + (editable ? 1 : 0) + (props.value?.length || 0)) %
+                                3 ==
+                                0
+                                ? spacingHorizontal
+                                : spacingInner,
+                            width: sideLength,
+                            height: sideLength,
+                        },
+                    ]}/>))}
+      </View>);
+    }
+    return (<View style={[styles.container, props.style]} ref={containerRef}>
+      {viewModel?.photos instanceof Array &&
+            viewModel.photos.map((item, index) => {
+                return (<ItemView key={index} source={typeof item === "string" ? { uri: item } : item} index={index}/>);
+            })}
+
+      {!(viewModel?.photos?.length == maxCount) && editable && (<TouchableOpacity style={[
+                styles.item_container,
+                itemContainerStyle,
+                {
+                    marginTop: (viewModel?.photos?.length || 0) >= 3 ? spacingInner : 0,
+                    marginLeft: (viewModel?.photos?.length || 0) % 3 == 0
+                        ? spacingHorizontal
+                        : spacingInner,
+                    width: sideLength,
+                    height: sideLength,
+                },
+                addIconContainerStyle,
+            ]} activeOpacity={0.8} onPress={() => addPhoto()}>
+          <Image source={addIcon ? addIcon : icon_add_image} style={[{ width: "25%", height: "25%" }, addIconStyle]} resizeMode="contain"/>
+          {props.addText && (<Text style={[
+                    {
+                        fontSize: px2sp(12),
+                        color: "lightgrey",
+                        marginTop: px2dp(2),
+                    },
+                    props.addTextStyle,
+                ]}>
+              {props.addText}
+            </Text>)}
+        </TouchableOpacity>)}
+      {showEmptyPlaceHolder &&
+            maxCount - (viewModel.photos?.length || 0) - 1 > 0 &&
+            Array.from({
+                length: maxCount - (viewModel.photos?.length || 0) - (editable ? 1 : 0),
+            }, (_, k) => (<View key={`sg-showEmptyPlaceHolder-${k}`} style={[
+                    styles.empty_place_container,
+                    emptyPlaceHolderStyle,
+                    itemContainerStyle,
+                    {
+                        marginTop: k + (editable ? 1 : 0) + (viewModel.photos?.length || 0) > 2
+                            ? spacingInner
+                            : 0,
+                        marginLeft: (k + (editable ? 1 : 0) + (viewModel.photos?.length || 0)) %
+                            3 ==
+                            0
+                            ? spacingHorizontal
+                            : spacingInner,
+                        width: sideLength,
+                        height: sideLength,
+                    },
+                ]}/>))}
+    </View>);
+};
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        minHeight: 1,
+        backgroundColor: "transparent",
+        display: "flex",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        // borderRadius: px2dp(10),
+    },
+    item_container: {
+        overflow: "hidden",
+        borderRadius: px2dp(10),
+        display: "flex",
+        position: "relative",
+        justifyContent: "center",
+        alignItems: "center",
+        backgroundColor: "#ededed",
+    },
+    del_img_container: {
+        position: "absolute",
+        right: 2,
+        top: 2,
+        width: px2dp(24),
+        height: px2dp(24),
+    },
+    empty_place_container: {
+        borderRadius: px2dp(10),
+        backgroundColor: "#ededed",
+        borderColor: "#cccccc",
+        borderWidth: 0.75,
+    },
+});
+export default React.memo(MutiPictureView, (prevProps, nextProps) => false);

package/dist/components/PictureViewer/PictureViewer.js

@@ -0,0 +1,54 @@
+/*
+ * @Author: shiguo
+ * @Date: 2022-04-24 15:58:39
+ * @LastEditors: shiguo
+ * @LastEditTime: 2022-04-26 12:38:13
+ * @FilePath: /@aks/easy/lib/PictureViewer/PictureViewer.tsx
+ */
+import * as React from "react";
+import { Modal, StatusBar, Platform } from "react-native";
+import ImageViewer from "react-native-image-zoom-viewer";
+export const PictureViewer = ({ bind, }) => {
+    const { viewModel, setViewModel } = bind;
+    const visible = viewModel.imageViewer.visible;
+    const imgs = viewModel.imageViewer.imageUrls?.map((item) => ({ url: item }));
+    const index = viewModel.imageViewer.index;
+    React.useEffect(() => {
+        if (Platform.OS == "android") {
+            if (visible) {
+                StatusBar.setBackgroundColor("black");
+                StatusBar.setBarStyle("light-content");
+            }
+            else {
+                StatusBar.setBackgroundColor("transparent");
+                StatusBar.setBarStyle("dark-content");
+            }
+        }
+    }, [visible]);
+    return (<Modal presentationStyle="overFullScreen" visible={visible} transparent={false} onRequestClose={() => {
+            /**
+             * 【官方文档】
+             * onRequestClose回调会在用户按下 Android 设备上的后退按键或是 Apple TV 上的菜单键时触发。
+             * 请务必注意本属性在 Android 平台上为必填，且会在 modal 处于开启状态时阻止BackHandler事件。
+             */
+            setViewModel({
+                imageViewer: {
+                    ...viewModel.imageViewer,
+                    visible: false,
+                },
+            });
+        }} style={{ margin: 0, backgroundColor: "red" }}>
+      <ImageViewer imageUrls={imgs} index={index} onSwipeDown={() => {
+            // console.log('onSwipeDown');
+        }} saveToLocalByLongPress={false} 
+    // onMove={data => console.log(data)}
+    useNativeDriver={true} enableSwipeDown={true} onClick={() => {
+            setViewModel({
+                imageViewer: {
+                    ...viewModel.imageViewer,
+                    visible: false,
+                },
+            });
+        }}/>
+    </Modal>);
+};

package/dist/components/RefreshList/RefreshList.js

@@ -0,0 +1,155 @@
+import * as React from "react";
+import { View, Text, Animated, StyleSheet, ActivityIndicator, TouchableOpacity, } from "react-native";
+import { SwipeListView } from "react-native-swipe-list-view";
+export const RefreshText = {
+    HeaderRefreshing: "上拉可以刷新",
+    FooterRefreshing: "下拉可以加载更多",
+    Failure: "服务器正在出小差，点击重新加载",
+    NoMoreData: "已经全部加载完毕",
+    EmptyData: "没有数据",
+    Idle: "正在加载更多的数据..",
+};
+export var RefreshState;
+(function (RefreshState) {
+    RefreshState["Idle"] = "Idle";
+    RefreshState["HeaderRefreshing"] = "HeaderRefreshing";
+    RefreshState["FooterRefreshing"] = "FooterRefreshing";
+    RefreshState["NoMoreData"] = "NoMoreData";
+    RefreshState["Failure"] = "Failure";
+    RefreshState["EmptyData"] = "EmptyData";
+    RefreshState["None"] = "None";
+})(RefreshState || (RefreshState = {}));
+export default React.forwardRef((props, ref) => {
+    const { mode = "FlatList", refreshState, onHeaderRefresh, onFooterRefresh, reload, ...rest } = props;
+    const seed = React.useRef(Math.random()).current;
+    let onRefresh = () => {
+        if (refreshState == RefreshState.HeaderRefreshing)
+            return;
+        if (refreshState == RefreshState.FooterRefreshing)
+            return;
+        onHeaderRefresh && onHeaderRefresh(RefreshState.HeaderRefreshing);
+    };
+    let onEndReached = (info) => {
+        if (mode == "FlatList") {
+            props = props;
+            if (!(props.data instanceof Array)) {
+                throw new Error("[sg:FlatList] data is not Array");
+            }
+            if (props.data.length == 0)
+                return;
+        }
+        if (mode == "SectionList") {
+            props = props;
+            if (!(props.sections instanceof Array)) {
+                throw new Error("[sg:SectionList] sections is not Array");
+            }
+            if (props.sections.length == 0)
+                return;
+        }
+        if (refreshState != RefreshState.Idle)
+            return;
+        onFooterRefresh && onFooterRefresh(RefreshState.FooterRefreshing);
+    };
+    switch (mode) {
+        case "FlatList": {
+            let flatListProps = props;
+            return (<Animated.FlatList {...rest} ref={ref} refreshing={refreshState == RefreshState.HeaderRefreshing} keyExtractor={(_, index) => {
+                    return `sg-index-FlatList-${seed}-${index}`;
+                }} contentContainerStyle={flatListProps.data?.length ? {} : { height: "100%" }} onRefresh={onRefresh} onEndReachedThreshold={0.1} onEndReached={onEndReached} showsVerticalScrollIndicator={false} ListHeaderComponent={(_) => (<View style={{ display: "flex", flexDirection: "column" }}>
+                <ListHeaderComponent {...flatListProps}/>
+                {/* {flatListProps.ListHeaderComponent} */}
+              </View>)} 
+            // ListHeaderComponent={flatListProps.ListHeaderComponent}
+            ListFooterComponent={(_) => (<ListFooterComponent {...flatListProps}/>)}/>);
+        }
+        case "SectionList": {
+            let sectionListProps = props;
+            const { ItemSeparatorComponent = (_) => <View style={{ height: 1 }}/>, } = sectionListProps;
+            return (<Animated.SectionList {...rest} ref={ref} refreshing={refreshState == RefreshState.HeaderRefreshing} onRefresh={onRefresh} keyExtractor={(_, index) => {
+                    return `sg-index-SectionList-${seed}-${index}`;
+                }} contentContainerStyle={sectionListProps.sections?.length > 0 ? {} : { height: "100%" }} ItemSeparatorComponent={ItemSeparatorComponent} onEndReachedThreshold={0.1} onEndReached={onEndReached} showsVerticalScrollIndicator={false} 
+            // ListHeaderComponent={(_) => <ListHeaderComponent {...sectionListProps} />}
+            ListHeaderComponent={(_) => (<View style={{ display: "flex", flexDirection: "column" }}>
+                <ListHeaderComponent {...sectionListProps}/>
+                {sectionListProps.ListHeaderComponent}
+              </View>)} ListFooterComponent={(_) => (<ListFooterComponent {...sectionListProps}/>)} renderSectionHeader={sectionListProps.renderSectionHeader}/>);
+        }
+        case "SwipeList": {
+            let swipeListProps = props;
+            const { ItemSeparatorComponent = (_) => <View style={{ height: 1 }}/>, } = swipeListProps;
+            const { renderHiddenItem = (data, rowMap) => (<View style={{
+                    backgroundColor: "red",
+                    height: "100%",
+                    alignItems: "flex-end",
+                    justifyContent: "center",
+                }}>
+              <Text>Right </Text>
+            </View>), } = swipeListProps;
+            return (<SwipeListView {...rest} rightOpenValue={-100} leftOpenValue={0} ref={ref} disableLeftSwipe={false} disableRightSwipe={true} onRefresh={onRefresh} refreshing={refreshState == RefreshState.HeaderRefreshing} ItemSeparatorComponent={ItemSeparatorComponent} onEndReachedThreshold={0.1} onEndReached={onEndReached} showsVerticalScrollIndicator={false} ListHeaderComponent={(_) => (<View style={{ display: "flex", flexDirection: "column" }}>
+                <ListHeaderComponent {...swipeListProps}/>
+                {swipeListProps.ListHeaderComponent}
+              </View>)} ListFooterComponent={(args) => (<ListFooterComponent {...swipeListProps}/>)} renderHiddenItem={renderHiddenItem}/>);
+        }
+    }
+});
+const ListFooterComponent = React.memo((props) => {
+    const { refreshState, reload } = props;
+    switch (refreshState) {
+        case RefreshState.Idle:
+        case RefreshState.FooterRefreshing:
+            return (<View style={{ ...styles.container, flexDirection: "row" }}>
+          <ActivityIndicator color={"gray"}/>
+          <Text style={{ ...styles.text, marginLeft: 5 }}>
+            {RefreshText.FooterRefreshing}
+          </Text>
+        </View>);
+        case RefreshState.NoMoreData:
+            return (<View style={styles.container}>
+          <Text style={{ ...styles.text, color: "#999999" }}>
+            {RefreshText.NoMoreData}
+          </Text>
+        </View>);
+        case RefreshState.Failure:
+            return (<View style={styles.container}>
+          <TouchableOpacity onPress={() => reload && reload()}>
+            <Text style={styles.text}>{RefreshText.Failure}</Text>
+          </TouchableOpacity>
+        </View>);
+        case RefreshState.EmptyData:
+            if (props.renderListEmptyComponent)
+                return props.renderListEmptyComponent();
+            return (<View style={styles.container}>
+          <TouchableOpacity onPress={() => reload && reload()}>
+            <Text style={styles.text}>{RefreshText.EmptyData}</Text>
+          </TouchableOpacity>
+        </View>);
+        default:
+            return <View />;
+    }
+});
+const ListHeaderComponent = React.memo((props) => {
+    const { refreshState } = props;
+    switch (refreshState) {
+        case RefreshState.HeaderRefreshing:
+            return (<View style={{ ...styles.container }}>
+          <Text style={{ ...styles.text }}>{RefreshText.HeaderRefreshing}</Text>
+        </View>);
+        default:
+            return <View />;
+    }
+});
+const styles = StyleSheet.create({
+    container: {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        height: 44,
+        // backgroundColor:'cyan'
+    },
+    text: {
+        color: "gray",
+        lineHeight: 16,
+        fontSize: 13,
+    },
+});

package/dist/components/RichText/RichText.js

@@ -0,0 +1,56 @@
+/*
+ * @Author: shiguo
+ * @Date: 2022-07-11 15:42:16
+ * @LastEditors: shiguo
+ * @LastEditTime: 2022-07-11 16:15:02
+ * @FilePath: /@aks-dev/easyui/lib/RichText/RichText.tsx
+ */
+import React from "react";
+import { StyleSheet, Text } from "react-native";
+import { px2sp } from "../../screen/px2sp";
+import * as utils from "../../utils/lazy";
+export default (props) => {
+    const { rich, richStyle, text, suffix, prefix, ...rest } = props;
+    let textStr = "";
+    let richStr = "";
+    if (utils.isString(text) || utils.isNumber(text)) {
+        textStr = String(text);
+    }
+    if (utils.isString(rich) || utils.isNumber(rich)) {
+        richStr = String(rich);
+    }
+    let positionStart = 0;
+    let positionEnd = 0;
+    if (textStr?.indexOf(richStr) >= 0) {
+        positionStart = textStr.indexOf(richStr);
+        positionEnd = positionStart + richStr.length;
+    }
+    if (prefix) {
+        return (<Text style={styles.container} {...rest}>
+        <Text style={{ ...styles.defaultRich, ...richStyle }}>{richStr}</Text>
+        {textStr}
+      </Text>);
+    }
+    if (suffix) {
+        return (<Text style={styles.container} {...rest}>
+        {textStr}
+        <Text style={{ ...styles.defaultRich, ...richStyle }}>{richStr}</Text>
+      </Text>);
+    }
+    return (<Text style={styles.container} {...rest}>
+      {textStr.substring(0, positionStart)}
+      {positionEnd > 0 && (<Text style={{ ...styles.defaultRich, ...richStyle }}>{richStr}</Text>)}
+      {textStr.substring(positionEnd, textStr.length)}
+    </Text>);
+};
+const styles = StyleSheet.create({
+    container: {
+        color: "#333333",
+        fontSize: px2sp(14),
+    },
+    defaultRich: {
+        color: "red",
+        fontSize: px2sp(14),
+        // fontWeight: 'bold'
+    },
+});

package/dist/components/StickHeaderView/StickHeaderView.js

@@ -0,0 +1,37 @@
+/*
+ * @Author: shiguo
+ * @Date: 2022-04-29 10:22:16
+ * @LastEditors: shiguo
+ * @LastEditTime: 2022-04-29 10:27:44
+ * @FilePath: /@aks/easyui/lib/StickHeaderView/StickHeaderView.tsx
+ */
+import * as React from "react";
+import { StyleSheet, Animated, } from "react-native";
+const App = (props) => {
+    const { style, children, stickyHeaderY = -1, stickyScrollY = new Animated.Value(0), } = props;
+    const [stickyLayoutY, setStickyLayoutY] = React.useState(0);
+    // 兼容代码，防止没有传头部高度
+    const _onLayout = (event) => {
+        setStickyLayoutY(event.nativeEvent.layout.y);
+    };
+    const translateY = () => {
+        let y = stickyHeaderY !== -1 ? stickyHeaderY : stickyLayoutY;
+        return stickyScrollY.interpolate({
+            inputRange: [-1, 0, y, y + 1],
+            outputRange: [0, 0, 0, 1],
+        });
+    };
+    return (<Animated.View onLayout={_onLayout} style={[
+            style,
+            styles.container,
+            { transform: [{ translateY: translateY() }] },
+        ]}>
+      {children}
+    </Animated.View>);
+};
+const styles = StyleSheet.create({
+    container: {
+        zIndex: 100,
+    },
+});
+export default React.memo(App);

package/dist/components/TableCell/TableCell.js

@@ -0,0 +1,97 @@
+import * as React from "react";
+import { View, Text, StyleSheet, TouchableOpacity, Image, } from "react-native";
+import { px2dp } from "../../screen/px2dp";
+import { px2sp } from "../../screen/px2sp";
+export default (props) => {
+    const { showNav = false, activeOpacity = 0.8 } = props;
+    return (<TouchableOpacity activeOpacity={props.onPress == undefined ? activeOpacity : 1} style={[styles.container, props.style]} disabled={props.onPress == undefined} onPress={() => props.onPress && props.onPress()}>
+      <View style={[
+            styles.warpper,
+            props.showUnderline
+                ? {
+                    borderBottomColor: "#f2f2f2",
+                    // borderBottomWidth: StyleSheet.hairlineWidth,
+                    borderBottomWidth: px2dp(1),
+                    ...props.underlineStyle,
+                }
+                : {},
+        ]}>
+        {props.icon && (<Image style={[
+                { width: px2dp(20), height: px2dp(20), marginRight: px2dp(8) },
+                props.iconStyle,
+            ]} resizeMode="contain" source={props.icon}/>)}
+        <View style={[styles.middle, props.middleContaierStyle]}>
+          {/* 标题 */}
+          {(() => {
+            if (typeof props.title === "string" ||
+                typeof props.title === "number") {
+                return (<Text numberOfLines={1} {...props.titleOptions} style={[styles.title, props.titleOptions?.style]}>
+                  {props.title}
+                </Text>);
+            }
+            if (React.isValidElement(props.title))
+                return props.title;
+            return <View style={styles.title}/>;
+        })()}
+
+          {(() => {
+            if (typeof props.content === "string" ||
+                typeof props.content === "number") {
+                return (<Text numberOfLines={1} {...props.contentOptions} style={[styles.content, props.contentOptions?.style]}>
+                  {props.content}
+                </Text>);
+            }
+            if (React.isValidElement(props.content))
+                return props.content;
+            return undefined;
+        })()}
+        </View>
+        {showNav &&
+            (props.nav || (<Image style={{
+                    width: px2dp(9),
+                    height: px2dp(16),
+                    marginLeft: px2dp(8),
+                }} source={require("./assets/back.png")}/>))}
+      </View>
+    </TouchableOpacity>);
+};
+const styles = StyleSheet.create({
+    container: {
+        display: "flex",
+        minHeight: px2dp(44),
+        paddingLeft: px2dp(15),
+        paddingRight: px2dp(10),
+        backgroundColor: "white",
+    },
+    warpper: {
+        flexGrow: 1,
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        position: "relative",
+    },
+    middle: {
+        flexGrow: 1,
+        flexShrink: 1,
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        // backgroundColor: 'cyan'
+    },
+    title: {
+        // backgroundColor: 'red',
+        flexGrow: 0,
+        flexShrink: 0,
+        fontSize: px2sp(14),
+        color: "#333333",
+    },
+    content: {
+        // backgroundColor: 'yellow',
+        flexGrow: 1,
+        flexShrink: 1,
+        fontSize: px2sp(14),
+        color: "#666666",
+        textAlign: "right",
+    },
+});