Dingdong_client/screens/Order/Header.js

/* eslint-disable react/style-prop-object */
import * as React from 'react';
import { View } from 'react-native';
import { StatusBar } from 'expo-status-bar';
import { Appbar, Menu } from 'react-native-paper';
import { useBoolean, useCreation } from '@umijs/hooks';
import { goBack, navigate } from '../../navigation/RootNavigation';

export default function Header({ title, noBack, bg, hasRight, orderId }) {
  const { state, setTrue, setFalse } = useBoolean(false);
  return (
    <>
      <StatusBar
        backgroundColor={bg || '#FFC21C'}
        style={!bg || bg === '#FFC21C' ? 'light' : 'dark'}
        translucent
      />

      <Appbar.Header
        dark={!bg || bg === '#FFC21C'}
        style={{
          zIndex: 3,
          elevation: 0,
          shadowOffset: {
            width: 0,
            height: 0,
          },
          shadowOpacity: 0,
        }}
        theme={{ colors: { primary: bg || '#FFC21C' } }}
      >
        {!noBack && <Appbar.BackAction onPress={goBack} />}
        <Appbar.Content
          title={title || '我的订单'}
          titleStyle={{ textAlign: 'center', fontSize: 16 }}
        />
        {!noBack && !hasRight && (
          <Appbar.Action
            icon={() => <View style={{ width: 24, height: 24 }} />}
          />
        )}
        {hasRight && (
          <Menu
            visible={state}
            onDismiss={setFalse}
            anchor={<Appbar.Action icon="dots-vertical" onPress={setTrue} />}
          >
            <Menu.Item
              onPress={() => {
                setFalse();
                navigate('ApplayCancel', {
                  orderId,
                });
              }}
              title="取消订单"
            />
          </Menu>
        )}
      </Appbar.Header>
    </>
  );
}