Dingdong_app/components/GuideHeaderBar.js

import React from "react";
import { Button, Layout, useTheme, Text } from "@ui-kitten/components";
import { useModel } from "flooks";
import { Image, StyleSheet } from "react-native";

export default function GuideHeaderBar(props) {
    const theme = useTheme();
    const { registerInfo, showName, mid } = useModel("userModel");

    const title = React.useMemo(() => {
        if (mid) {
            return showName;
        } else {
            return registerInfo.showName;
        }
    }, [showName, registerInfo]);
    return (
        <Layout
            style={[
                styles.container,
                { backgroundColor: theme["color-primary-500"] },
            ]}
        >
            <Image
                source={require("../assets/images/logo_bai.png")}
                style={styles.icon}
            />
            <Text style={styles.text} category='h6'>
                {title}
            </Text>
        </Layout>
    );
}

const styles = StyleSheet.create({
    container: {
        height: 70,
        flexDirection: "row",
        paddingVertical: 10,
        paddingHorizontal: 65,
        alignItems: "center",
        justifyContent: "center",
    },
    icon: { width: 49, height: 49, position: "absolute", left: 15, top: 10 },
    text: {
        color: "#fff",
    },
});