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 に答える