Dingdong_client/screens/Detail/DetailHeader.jsx

/* eslint-disable react/style-prop-object */
import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import { StatusBar } from 'expo-status-bar';
import { Appbar } from 'react-native-paper';
import { Div, Button } from 'react-native-magnus';
import { goBack, navigate, replace } from '../../navigation/RootNavigation';

export default function DetailHeader({ noRight, type, noTab }) {
  return (
    <>
      <StatusBar style="light" backgroundColor="transparent" translucent />
      <View style={[noTab && styles.view]}>
        <Appbar.Header
          dark
          style={styles.header}
          theme={{
            colors: { primary: noTab ? 'transparent' : 'rgba(255,194,28,1)' },
          }}
        >
          <Appbar.BackAction onPress={goBack} />
          <Appbar.Content />
          {!noRight && <Appbar.Action icon="magnify" />}
          {!noRight && <Appbar.Action icon="share-variant" />}
        </Appbar.Header>
      </View>
      {!noTab && (
        <Div row bg="gray200">
          <Button
            flex={1}
            bg="hide"
            color="gray600"
            h={60}
            onPress={() => navigate('MerchantDetail')}
          >
            订单
          </Button>
          <Button
            flex={1}
            bg="hide"
            color={type === 'comment' ? 'brand500' : 'gray600'}
            h={60}
            onPress={() => replace('MerchantDetailComment')}
          >
            评论
          </Button>
          <Button
            flex={1}
            bg="hide"
            color={type === 'merchat' ? 'brand500' : 'gray600'}
            h={60}
            onPress={() => replace('MerchantDetailMerchant')}
          >
            商家
          </Button>
        </Div>
      )}
    </>
  );
}

const styles = StyleSheet.create({
  header: {
    elevation: 0,
    shadowOffset: {
      width: 0,
      height: 0,
    },
    shadowOpacity: 0,
  },
  view: {
    // backgroundColor: 'rgb(242, 242, 242)',
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    zIndex: 2,
  },
});