如何在本机中显示一半图像而不是另一个图像

Question

我正在使用react-native制作应用程序，我必须在其中显示用户的个人资料照片。 I want to make UI of somewhat this type 。如附图所示，我们可以看到配置文件图片略微向上移动，具有图像背景。

我已经编写了代码，但整个个人资料图片已移到

之上

    var array = ["History"]
    array["History"] = [];
    ...
    for (var i = 0; i<div.length; i++){
        array["History"].push( {
            "name": div[i].value
        });
    }

如何为附加图像中的个人资料图片制作此类UI。

Answer 1

如果你的个人资料图片的高度和宽度相同，你可以给你的缩略图位置绝对，并给它一个顶部值和一个左边的值来给出相同的结果。

修改

render() {

    return (
        <Container style={{ backgroundColor: '#FFFFFF', }}>




            <Content>



                <Image source={{ uri: 'https://firebasestorage.googleapis.com/v0/b/reactnativechatapp-6f7eb.appspot.com/o/Ontro%20Copy%209.png?alt=media&token=2ede2451-0a14-4988-a9e2-ba88bab2c844' }}
                    style={styles.image}/>


                 <View style={{
                        flexDirection: 'row', alignItems: 'flex-end', 
                        marginTop: 15,
                        justifyContent: 'flex-start', marginLeft: 20,
                        flex: 1,
                        position: 'absolute',
                        top: 30,
                        left: 16,
                    }}>
                        <Thumbnail source={{ uri: 'https://placeimg.com/640/480/people' }} />

                    </View>




                <View style={{
                    flexDirection: 'row', alignItems: 'flex-start',
                    justifyContent: 'flex-start', marginLeft: 40,
                    backgroundColor: '#FFFFFF', flex: 1
                }}>


                    <View style={{ flexDirection: 'column', marginTop: 10, marginBottom: 15 }}>
                        <Text style={{ color: '#9F2232', marginLeft: 15, fontSize: 22, }}>Cecelia Fletcher</Text>


                        <Text style={{ color: '#9E9C9E', marginLeft: 15, fontSize: 12, }}>West Mambalam</Text>
                    </View>



                </View>

                <Separator />

试试这个。我基本上从图片标签中删除了缩略图并给它一个绝对位置。您可以使用顶部和左侧的项目。