@td-design/react-native/lib/module/image-header/index.js

react-native UI组件库

import React, { useMemo } from 'react';
import { ImageBackground, StatusBar, StyleSheet } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { useTheme } from '@shopify/restyle';
import Box from '../box';
import Flex from '../flex';
import helpers from '../helpers';
import Pressable from '../pressable';
import SvgIcon from '../svg-icon';
import Text from '../text';
import WingBlank from '../wing-blank';
const {
  px,
  isIOS
} = helpers;
const ImageHeader = props => {
  const theme = useTheme();
  const insets = useSafeAreaInsets();
  const {
    headerRight,
    headerLeft,
    headerLeftColor = theme.colors.icon,
    headerBackgroundColor = theme.colors.transparent,
    headerBackgroundImg,
    headerHeight,
    children,
    onPress,
    showLeft = true,
    headerTitle,
    activeOpacity = 0.6
  } = props;
  const styles = StyleSheet.create({
    header: {
      paddingTop: isIOS ? insets.top + theme.spacing.x2 : theme.spacing.x5 + StatusBar.currentHeight,
      paddingBottom: theme.spacing.x2,
      paddingRight: theme.spacing.x3,
      backgroundColor: headerBackgroundColor
    }
  });
  const HeaderLeft = useMemo(() => {
    if (headerLeft) {
      if (typeof headerLeft === 'string') {
        return /*#__PURE__*/React.createElement(Text, {
          style: {
            color: headerLeftColor
          },
          fontSize: px(16)
        }, headerLeft);
      }
      return headerLeft;
    }
    return /*#__PURE__*/React.createElement(SvgIcon, {
      name: "left",
      size: px(20),
      color: headerLeftColor
    });
  }, [headerLeft, headerLeftColor]);
  return /*#__PURE__*/React.createElement(ImageBackground, {
    source: headerBackgroundImg,
    style: {
      width: '100%',
      height: headerHeight
    }
  }, /*#__PURE__*/React.createElement(Flex, {
    style: styles.header
  }, showLeft ? /*#__PURE__*/React.createElement(Pressable, {
    activeOpacity: activeOpacity,
    onPress: onPress,
    style: {
      flex: 1,
      paddingLeft: theme.spacing.x2
    }
  }, HeaderLeft) : /*#__PURE__*/React.createElement(Box, {
    flex: 1
  }), typeof headerTitle === 'string' ? /*#__PURE__*/React.createElement(Text, {
    color: "text",
    fontSize: px(16)
  }, headerTitle) : headerTitle, /*#__PURE__*/React.createElement(Box, {
    flex: 1,
    alignItems: "flex-end"
  }, headerRight)), /*#__PURE__*/React.createElement(WingBlank, null, children));
};
ImageHeader.displayName = 'ImageHeader';
export { ImageHeader };
export { default as AnimateHeader } from './AnimateHeader';
//# sourceMappingURL=index.js.map