React Native Image前面的其他视图

Question

我想编写样式表来显示像这张图片的loyout：

化身：

我写这样的代码：

<View style={styles.header}></View>
<View style={styles.meInfor}>
    <Image style={styles.avatar}
      source={require('../../images/cristiano-ronaldo.jpg')} />
</View>

和风格：

header:{
        width: width,
        height: 100,
        backgroundColor: '#1270BA',
    },
    meInfor:{
        width: width,
        backgroundColor: '#FFFFFF',
        alignItems: 'center',
        justifyContent: 'center',
    },
    avatar: {
        marginTop: -50,
        width: 100,
        height: 100,
        borderRadius: 100,
    }

我使用marginTop: - 50将头像拉到顶部，但结果如下：

结果不好：

如何像第一张图片一样设置这个头像的样式？

Answer 1

像这样更改样式表

header : {
      width: width,
      height: 100,
      backgroundColor: '#1270BA'
    },
    meInfor : {
      position: 'absolute',

      width: width,

      alignItems: 'center',
      justifyContent: 'center'
    },
    avatar : {
      marginTop: 50,
      width: 100,
      height: 100,
      borderRadius: 100
    }

Answer 2

尝试使用此代码，它在我的案例中运行良好

<强>组件

import React, { Component } from 'react';
import { Text, Image, View, StyleSheet, Dimensions } from 'react-native';


export default class App extends Component {
  render() {
  const {header, meInfor, avatar, container} = styles; 
    return (
      <View style={container}>
        <View style={header}></View>
        <View style={meInfor}></View>
        <Image style={avatar}
      source={{uri: 'http://infosahabat.com/wp-content/uploads/2015/12/Permainan-Bola-Besar.jpg'}} 
       />
      </View>
    );
  }
}

这就是风格

<强>风格

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'lightgray',
    },
    header:{
        height: 100,
        backgroundColor: '#1270BA',
    },
    meInfor:{
        backgroundColor: '#FFF',
        top: 0,
        height: 50,
        width: (Dimensions.get('window').width),   
    },
    avatar: {
        position: 'absolute',
        top: 50,
        left: (Dimensions.get('window').width / 2) - 50,
        alignItems: 'center',
        width: 100,
        height: 100,
        borderColor: 'black',
        borderWidth: 1,
        borderRadius: 100,
    }
});