React-Native-Elements：在圆形头像的中心显示图像组件

Question

我正在使用 react-native-elements 渲染 Avatar ，我有一张图片要显示在圆角头像中，我希望图片位于圆形头像的中心。

这是我试过的：

<Avatar
   size={60}
   containerStyle={{backgroundColor: 'black'}}
   rounded
   ImageComponent={MyImg}
   avatarStyle={{justifyContent: 'center', alignItems: 'center'}}
 />

MyImg是一个由SVG转换而来的tsx文件。

以上代码导致 MyImg 显示在圆形头像的左上角位置。

然后我尝试了：

<Avatar
       size={60}
       containerStyle={{backgroundColor: 'black', justifyContent: 'center', alignItems: 'center'}}
       rounded
       ImageComponent={MyImg}
       avatarStyle={{justifyContent: 'center', alignItems: 'center'}}
     />

此代码使 MyImg 消失。所以，我现在卡住了。

如何让图片组件居中显示？

==== 更多信息 ====

这里是 MyImg.tsx 文件：

function SvgMyImg(props) {
  return (
    <Svg width={24} height={24} fill="none" {...props}>
      <Path
        d="M7 7l10 10M17 7L7 17"
        stroke="#fff"
        strokeWidth={2}
        strokeLinecap="round"
      />
    </Svg>
  );
}

export default SvgMyImg;

我只是导入这个文件，例如import MyImg from '../assets/images/MyImg'; 并将其用作 Avatar 的 imageComponent，如我的代码所示。

Answer 1

<Avatar
   size={60}
   containerStyle={{backgroundColor: 'black', width: 70, height: 70, padding: 5}}
   rounded
   ImageComponent={MyImg}
 />

Answer 2

<Avatar
   size={60}
   containerStyle={{flex:1, backgroundColor: 'black', alignItems: 'center', justifyContent: 'center'}}
   rounded
   ImageComponent={MyImg}
/>

试试这个

如果能提供Img简而言之组件就好了

Answer 3

我已经尝试过类似您在 snack.expo 中想要做的事情。关键是使用 position:absolute

 <View style={styles.container}>
      <Avatar
        size={60}
        containerStyle={{ backgroundColor: 'black' }}
        rounded
        ImageComponent={() => (
          <Image
            resizeMode="contain"
            style={{
              height: 30,
              width: 30,
              borderRadius: 25,
              position: 'absolute',
            }}
            source={{
              uri: 'https://homepages.cae.wisc.edu/~ece533/images/boat.png',
            }}
          />
        )}
        overlayContainerStyle={{
          justifyContent: 'center',
          alignItems: 'center',
        }}
      />
    </View>

Answer 4

试试这个。我在头像上添加了边距。它对我有用。

        <Avatar
          size={120}
          containerStyle={{
            backgroundColor: '#F6F6F6',
          }}
          rounded
          ImageComponent={MyImg}
          avatarStyle={{
            marginLeft: 38,
            marginTop: 20,
          }}>

React-Native-Elements：在圆形头像的中心显示图像组件

React-Native-Elements: Showing image component in the center of the rounded Avatar

react-native

react-native-elements