如何在本机反应中将图像的一半显示在另一个图像上

Question

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

我已经写了代码，但是整个个人资料图片都移到上面了

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
                        }}>
                            <Thumbnail source={{ uri: 'https://placeimg.com/640/480/people' }} />

                        </View>


                    </Image>






                    <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 />

如何为所附图片中的个人资料图片制作这种类型的 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 />

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