Dingdong_client/screens/Main/Home/HomeHeader.js

import * as React from 'react';
import { StatusBar } from 'expo-status-bar';
import { Appbar, Menu } from 'react-native-paper';
import { useBoolean, useCreation } from '@umijs/hooks';
import { Icon, Text, Button, Div } from 'react-native-magnus';

import useModel from 'flooks';
import { useNavigation } from '@react-navigation/native';
import words from '../../../flooks/Words';
import user from '../../../flooks/User';
import MapModel from '../../Map/model';

export default function Header() {
  const { chooseInfo, getChooseInfo } = useModel(MapModel, [
    'chooseInfo',
    'getChooseInfo',
  ]);
  const { state, setTrue, setFalse } = useBoolean(false);
  const { setlocal, TchangeToth, TchangeToChinese, local } = useModel(words);

  const { logout } = useModel(user, []);

  const navigation = useNavigation();

  const addressName = useCreation(() => {
    if (chooseInfo) {
      return chooseInfo.addressName;
    } else {
      return '';
    }
  }, [chooseInfo]);

  return (
    <>
      <StatusBar backgroundColor="transparent" style="dark" translucent />

      <Appbar.Header
        statusBarHeight={0}
        theme={{ colors: { primary: '#fff' } }}
        style={{
          elevation: 0,
          shadowOffset: {
            width: 0,
            height: 0,
          },
          shadowOpacity: 0,
          zIndex: 2,
        }}
      >
        <Button
          onPress={() => navigation.navigate('HomeAddress')}
          block
          bg="hiden"
          p={0}
          flex={1}
        >
          <Div flex={1} row>
            <Icon
              name="navigation"
              color="brand500"
              fontFamily="Feather"
              ml={15}
            />
            <Text
              numberOfLines={2}
              ellipsizeMode="tail"
              fontSize="xl"
              ml={5}
              fontWeight="bold"
              flex={1}
            >
              {getChooseInfo.loading ? '加载中...' : addressName}
            </Text>
          </Div>
        </Button>

        <Menu
          visible={state}
          onDismiss={setFalse}
          anchor={<Appbar.Action icon="dots-vertical" onPress={setTrue} />}
        >
          <Menu.Item
            onPress={() => {
              setFalse();
              navigation.navigate('MapScreen');
            }}
            title="地图选点测试"
          />
          <Menu.Item onPress={logout} title="退出登录" />
          <Menu.Item
            onPress={() => {
              setlocal();
            }}
            title={local ? TchangeToChinese : TchangeToth}
          />
          <Menu.Item onPress={() => {}} title="版本07.09.2(首页筛选组件)" />
        </Menu>
      </Appbar.Header>
    </>
  );
}