Question

我正在使用react-native-elements来渲染Avatar，我有一个图像要显示在圆形的Avatar中，并且我希望该图像位于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';并将其用作imageComponent的{{1}}，如我的代码所示。

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：在圆形头像的中心显示图像组件

4 个答案: