Javascript 如何在react native中在另一个图像上显示图像的一半

我正在用react native制作一个应用程序，其中我必须显示用户的个人资料图片。正如在所附的图像中，我们可以看到剖面图微微向上移动，具有图像背景

我写的代码，但整个配置文件图片是上面移动

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

render（）{
返回(
塞西莉亚·弗莱彻
西曼巴拉姆

---

如何为所附图像中的配置文件图片创建这种类型的用户界面。

如果您的配置文件图像的高度和宽度相同，您可以将缩略图位置设置为绝对位置，并将其设置为顶部值和左侧值，以获得相同的结果

编辑

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

render（）{
返回(
塞西莉亚·弗莱彻
西曼巴拉姆

---

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

你是否尝试过在顶部图像上使用负片边框底部？或者在底部图像上使用负片边框顶部？不，我没有使用过。你能通过修改代码来解释我吗？我尝试过它是saying无效本体负边界不工作负边界剪辑Android上的底部图像你可以更改我的代码并按我正在做的方式显示，然后图像根本不显示请帮助我我是新反应本地人是的，很抱歉是驾驶，但这应该与你的缩略图重叠你的图像和对齐它就像你想给它一个顶部：（一些值）和左：（一些值）后的位置：'绝对'是的，它有重叠，但它只停留在背景图像的结尾，当我给paddingTop:30，但它不会下降