Question

我的标头组件中有一个配置文件映像，它的来源来自数据库，它是一个字符串数组。我的问题是，当我从数据库中获取用户图片时，它从顶部开始就被切割掉了。因此，用户使用的头看起来像割伤了。该图像位于borderRadius的视图中，以使其为圆形。

我尝试过的事情：

resizeMode: 'cover',
resizeMode: 'contain',
position:'absolute',
bottom: 0,

到目前为止，它们都没有工作。

如果您能帮助我，我将不胜感激，谢谢。

PS：我在stackoverflow中看了几个（超过10个）主题，但我做不到。

更新

这是我的Header组件：

            <View style={styles.container}>
                <View style={styles.backButtonContainer} >
                    {isBackButtonIconVisible ? this._renderBackButtonIcon() : null}
                </View>
                <View style={styles.textContainer} >
                    <Text style={styles.text}>{text}</Text>
                </View>
                <View style={styles.profileButtonContainer}>
                    {isProfileIconVisible ? this._renderProfileIcon() : null}
                    {isProfilePictureVisible ? this._renderProfilePicture() : null}
                </View>
            </View>

渲染个人资料图片：

    _renderProfilePicture() {
        let profileIcon = (
            <View style={styles.profileButtonContainer} >
                <CircularProfilePicture
                    onPress={this.props.onProfilePress}
                    ProfilePictureSourceUri={this.props.ProfilePictureSourceUri}
                ></CircularProfilePicture>
            </View>
        );
        return profileIcon;
    }

这是我的CircularProfilePicture组件

class CircularProfilePicture extends Component {
    render() {
        const {onPress} = this.props;
        return (
            <View style={styles.container}>
                <TouchableOpacity
                    onPress={() => onPress()}
                >
                    <Image source={{ uri: 'data:image/png;base64,' + this.props.ProfilePictureSourceUri }}
                        style={styles.image} />
                </TouchableOpacity>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 10,        
    },
    image:{
        width: 55,
        height: 60,
        alignSelf: 'center',
        resizeMode: 'cover',
    }
});

Answer 1

尝试一下：

padding:3px; // putting your image in the middle of div, setting in px the  
              value you need 
position:absolute;
width: 200px;    // the value that  you have designed your div
height: 200px;   //the value that  you have designed your div
border-radius:30%;  // set the value you need;
-moz-border-radius: 30%;  //ancient mozzila versions
-webkit-border-radius:30%; //ancient chrome or Safari versions

Answer 2

如果我对您的理解正确，我认为样式道具alignItems和justifyContent可以帮助您将Image放在View内部。要么将View放在绝对位置，然后在flex: 1上使用Image，使其占用View中的所有可用空间。

将图像放置在视图内

2 个答案: