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 ? 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>
  );
}