嗨老师，我想做如下的效果，就是用户的头像可以有一半在上面的布局，一半在下面的布局：

我稍微敲了下代码，如下：

import React from 'react';
import {StyleSheet, View,Image } from 'react-native';
import colors from "../config/colors";


function Profile(props) {
    return (
       <View style ={styles.container}>
            <View style={styles.first_container}>
            <Image style={styles.img_bg} source={require("../assets/red_jacket.png")}/>
            </View>
            <Image source ={require('../assets/earth.png')} style={styles.img_profile}/>
            <View style ={styles.second_container}>

            </View>
       </View>
    );
}

const styles = StyleSheet.create({
    container : {
      flex : 1,
      backgroundColor : colors.white,
    },
    first_container :{
      flex : 0.55,
      backgroundColor :colors.light_yellow,
    },
    img_bg :{
      width : "100%",
      height : "100%",
      flex :1
    },
    img_profile :{
      width : 100,
      height :100,
      borderRadius : 50,
      position : 'absolute',
      top : 320,
      left :30,
      
    },

    second_container :{
       flex : 0.45,
       backgroundColor : colors.tomato
    }
})

export default Profile;

不过敲出来的效果，头像只显现了一半，能帮我看下问题在哪吗？谢谢你。
我的：