Dingdong_app/components/GuideHeaderBar.js

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

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",
    },
});

const img1=require("../assets/images/logo_bai.png")

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

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