@td-design/react-native/lib/module/avatar/Avatar/index.js

react-native UI组件库

import React, { memo } from 'react';
import { Image, StyleSheet } from 'react-native';
import { useTheme } from '@shopify/restyle';
import Pressable from '../../pressable';
import Text from '../../text';
import useAvatar from './useAvatar';
const Avatar = _ref => {
  let {
    title,
    url,
    textStyle,
    ...props
  } = _ref;
  const theme = useTheme();
  const {
    onPress,
    activeOpacity = 0.6,
    backgroundColor = theme.colors.white,
    containerStyle
  } = props;
  const {
    width,
    height,
    avatarRadius
  } = useAvatar(props);
  const styles = StyleSheet.create({
    avatar: {
      position: 'relative',
      width,
      height,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: backgroundColor,
      borderRadius: avatarRadius,
      ...containerStyle
    }
  });
  return /*#__PURE__*/React.createElement(Pressable, {
    activeOpacity: activeOpacity,
    disabled: !onPress,
    onPress: onPress,
    style: styles.avatar
  }, /*#__PURE__*/React.createElement(Content, {
    url,
    title,
    width,
    height,
    avatarRadius,
    textStyle
  }));
};
Avatar.displayName = 'Avatar';
export default Avatar;
const Content = /*#__PURE__*/memo(_ref2 => {
  let {
    url,
    title,
    width,
    height,
    avatarRadius,
    textStyle
  } = _ref2;
  if (!!url) return /*#__PURE__*/React.createElement(Image, {
    source: typeof url === 'string' ? {
      uri: url
    } : url,
    style: {
      width,
      height,
      borderRadius: avatarRadius
    },
    resizeMode: "cover"
  });
  if (!!title) return /*#__PURE__*/React.createElement(Text, {
    variant: "p0",
    textAlign: "center",
    color: "text",
    style: textStyle
  }, title);
  return null;
});
//# sourceMappingURL=index.js.map