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

【问题标题】：React-Native-Elements: Showing image component in the center of the rounded AvatarReact-Native-Elements：在圆形头像的中心显示图像组件
【发布时间】：2020-07-28 14:35:11
【问题描述】：

我正在使用 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，就像我的代码显示的那样。

【问题讨论】：

标签： react-native react-native-elements

【解决方案1】：

我已经尝试过您在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>

【讨论】：

【解决方案2】：

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

试试这个

如果你提供Img 组件就太好了

【讨论】：

谢谢，也无济于事。但我现在在我的问题中提供了MyImg 的tsx 文件。

【解决方案3】：

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

【讨论】：

不行，我也试过了，不行。我的图像随着这段代码消失了。
为什么不直接使用带有 react-native-svg-loader 的 svg 文件？
这可能是一个选项，但在我的问题范围之外，无论如何我想知道如何使它与我当前的方法一起工作。将所有内容都改回 SVG 是我项目中的一件大事，除非它是使其工作的唯一选择，否则我现在不会考虑。
可以尝试设置头像大小为60，容器为70，比如padding为5
它延伸了一个圆圈，这不是我想要的。但现在我用MyImg 文件的代码更新了我的问题。

【解决方案4】：

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

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

【讨论】：