0

我正在尝试为我的用户个人资料屏幕实现一个圆形头像。但我不知道为什么它没有出现圆形。

我检查了我的样式表，还尝试将头像元素放入另一个视图标签中。但它不起作用。

我的个人资料屏幕：

 return(

            <View style={styles.container}>
            <View style={styles.header}></View>
                <Avatar
                    style={styles.avatarContainer}
                    size={"large"}
                    rounded
                    onPress={this.takePicture}
                    activeOpacity={0.7}
                    source={{uri:User.image}}
                    showEditButton
                    avatarStyle={{borderRadius:63}}
                />

            <View style={styles.body}>
              <View style={styles.bodyContent}>
                <Text style={styles.name}>{User.name}</Text>
                <Text style={styles.info}>{User.phone}</Text>     
                <TouchableOpacity onPress={this.updateProfile} style={styles.buttonContainer}>
                  <Text style={{color:'#fff'}}>UPDATE</Text>  
                </TouchableOpacity>              
                {/* <TouchableOpacity onPress={this._logOut} style={styles.buttonContainer}>
                  <Text>LOGOUT</Text> 
                </TouchableOpacity> */}
              </View>
          </View>
        </View>
        )

我的样式表：

  avatarContainer: {
    borderRadius: 63,
    height:130, 
    width:130,
    borderWidth: 4,
    borderColor: "white",
    marginBottom:10,
    alignSelf:'center',
    position: 'absolute',
    marginTop:130
  },

我希望我的头像元素是圆形的，但它是方形的。

4

1 回答 1

0

我假设您使用的是Avatarfrom react-native-elements，所以我查看了它的源代码。这是您可以传递给它的数据（我删除了一些对您没有帮助的部分）：

Avatar.propTypes = {
  containerStyle: ViewPropTypes.style,
  source: RNImage.propTypes.source,
  avatarStyle: ViewPropTypes.style,
  rounded: PropTypes.bool,
  overlayContainerStyle: ViewPropTypes.style,
  activeOpacity: PropTypes.number,
  icon: PropTypes.object,
  iconStyle: Text.propTypes.style,
  size: PropTypes.oneOfType([
    PropTypes.oneOf(['small', 'medium', 'large', 'xlarge']),
    PropTypes.number,
  ]),
  imageProps: PropTypes.object,
  ImageComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
};

你应该做的是传递图像borderRaduis道具。

imageProp: {
    borderRadius: 100
}

注意：如果我是你，我会创建自己的圆形组件，它一点也不难，而且你可以更好地控制它。

于 2019-08-05T09:41:22.990 回答