Dingdong_app/screens/UserScreen.js

import * as WebBrowser from "expo-web-browser";
import * as React from "react";
import {
    Image,
    Platform,
    StyleSheet,
    TouchableOpacity,
    View,
    ImageBackground,
} from "react-native";
import scrollPage from "../decorator/scrollPage";
import { useModel } from "flooks";
import Badge from "../components/Badge";
import {
    Layout,
    Tab,
    TabView,
    Text,
    useTheme,
    Button,
    Card,
    Icon,
    Menu,
    MenuItem,
    OverflowMenu,
    TopNavigation,
    TopNavigationAction,
    Modal,
    MenuGroup,
} from "@ui-kitten/components";
import FormInput from "../components/FormInput";
import { useFocusEffect, useNavigation } from "@react-navigation/native";
import ScrollPage from "../components/ScrollPage";
import * as RootNavigation from "../navigation/RootNavigation.js";
import NavHeaderBar from "../components/NavHeaderBar";

export default function UserScreen({ navigation }) {
    const theme = useTheme();
    const { changeBackground } = useModel("barModel");
    const {
        showName,
        logo,
        introduction,
        proclamation,
        updateMerchant,
        banner,
    } = useModel("userModel");

    const {
        tab3,
        userTitle1,
        userTitle2,
        userTitle3,
        userTitle4,
        userTitle5,
        userTitle6,
        userTitle31,
        userTitle32,
        userTitle33,
        userTitle34,
        userTitle41,
        userTitle42,
        userTitle61,
        userTitle62,
        userTitle21,
        userTitle22,
        userTitle23,
        userTitle24,
    } = useModel("wordsModel");
    const [bannerImg, changeBannerImg] = React.useState("");

    useFocusEffect(
        React.useCallback(() => {
            changeBackground(theme["color-primary-500"]);
        }, [])
    );

    const renderBackAction = () => <Text category='h6'>{homeBar}</Text>;

    return (
        <>
            <NavHeaderBar title={tab3} back={false} />
            <ScrollPage>
                <Layout style={styles.container} level='1'>
                    <Menu style={styles.menu}>
                        <MenuItem
                            title={userTitle1}
                            accessoryRight={ForwardIcon}
                            style={styles.menuItem}
                            onPress={() => {
                                navigation.navigate("Home", {
                                    screen: "homeTab3",
                                });
                            }}
                        />

                        <MenuGroup title={userTitle2} style={styles.menuGroup}>
                            <MenuItem
                                title={userTitle21}
                                accessoryRight={ForwardIcon}
                                onPress={() => {
                                    navigation.navigate("FullReduction");
                                }}
                            />
                            <MenuItem
                                title={userTitle22}
                                accessoryRight={ForwardIcon}
                            />
                            <MenuItem
                                title={userTitle23}
                                accessoryRight={ForwardIcon}
                            />
                            <MenuItem
                                title={userTitle24}
                                accessoryRight={ForwardIcon}
                            />
                        </MenuGroup>

                        <MenuGroup title={userTitle3} style={styles.menuGroup2}>
                            <MenuItem
                                title={userTitle31}
                                accessoryRight={ForwardIcon}
                                onPress={() => {
                                    navigation.navigate("EditGoods");
                                }}
                            />
                            <MenuItem
                                title={userTitle32}
                                accessoryRight={ForwardIcon}
                            />
                            <MenuItem
                                title={userTitle33}
                                accessoryRight={ForwardIcon}
                            />
                            <MenuItem
                                title={userTitle34}
                                accessoryRight={ForwardIcon}
                                onPress={() => {
                                    navigation.navigate("AddClassification");
                                }}
                            />
                        </MenuGroup>
                        <MenuGroup title={userTitle4} style={styles.menuGroup2}>
                            <MenuItem
                                title={userTitle41}
                                accessoryRight={ForwardIcon}
                            />
                            <MenuItem
                                title={userTitle42}
                                accessoryRight={ForwardIcon}
                            />
                        </MenuGroup>

                        <MenuItem
                            title={userTitle5}
                            accessoryRight={ForwardIcon}
                            style={styles.menuGroup2}
                            onPress={() => {
                                navigation.navigate("Home", {
                                    screen: "homeTab2",
                                });
                            }}
                        />
                        <MenuGroup title={userTitle6} style={styles.menuGroup2}>
                            <MenuItem
                                title={userTitle61}
                                accessoryRight={ForwardIcon}
                            />
                            <MenuItem
                                title={userTitle62}
                                accessoryRight={ForwardIcon}
                            />
                        </MenuGroup>

                        {/* <MenuGroup title='Akveo React Native'>
                            <MenuItem title='UI Kitten' />
                            <MenuItem title='Kitten Tricks' />
                        </MenuGroup> */}
                    </Menu>
                </Layout>
            </ScrollPage>
        </>
    );
}

const StarIcon = (props) => <Icon {...props} name='star' />;

const ForwardIcon = (props) => (
    <Icon
        {...props}
        name='arrow-ios-forward'
        fill='#B4B4B4'
        style={{ width: 15, height: 15, fontWeight: 500 }}
    />
);

const styles = StyleSheet.create({
    container: {
        flexDirection: "row",
        justifyContent: "space-between",
    },
    menu: {
        flex: 1,
        backgroundColor: "#EEEEEE",
        paddingVertical: 3,
    },
    menuItem: { marginVertical: 3 },
    menuGroup: {
        marginTop: 3,
    },
    menuGroup2: {
        marginTop: 6,
    },
});