反應的其它視圖的本機映像前

Question

我想要寫的樣式表來顯示這樣的圖像一個loyout：

化身：

我寫這樣的代碼：

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

and style：

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

試試這個代碼，它在我的情況下

組件

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, 
    } 
}); 

Answer 2

更改樣式表這樣

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 
    }