RN flex布局和absolute 布局实践

代码如下:

return (

<View style={{height:200,backgroundColor:'#11D38B',alignItems:'center'}}>

 

<View style={{height:86,marginTop:120,width:global.width,backgroundColor:'#FFFFFF'}}>

</View>

 

{/* 中间那一块是绝对布局 */}

 

<View style={[{flexDirection:"column",justifyContent:"center",position:'absolute',alignItems:'center',width:global.width-40,height:145,borderRadius:12,bottom:26,backgroundColor:"#FFFFFF"},global.common.shadow]}>

 

<View style={{flexDirection:'row',alignItems:'center'}}>

<Text style={{fontSize:17,color:"#333333"}}>HKHKKK</Text>

<Text style={{fontSize:12,color:"#333333"}}>KKKKJK</Text>

</View>

 

<View style={{marginTop:5,flexDirection:'row',alignItems:'center'}}>

<Text style={{fontSize:12,color:"#333333"}}>HKHKKKJ</Text>

<Text style={{marginLeft:5,marginRight:5,fontSize:17,color:"#333333"}}>5</Text>

<Text style={{fontSize:12,color:"#333333"}}>KHKKJKKH</Text>

</View>

 

<View style={{marginTop:15,flexDirection:'row',justifyContent:'center',alignItems:'center'}}>

<View style={{width:64,height:0.5,backgroundColor:'#D5D5D5'}}>

</View>

<View style={{justifyContent:"center",alignItems:'center',width:54,height:17,borderRadius:8.5,borderWidth:1,borderColor:'#D5D5D5'}}>

<Text style={{color:"#A6A6A6",fontSize:10}}>{global.t('IO:HHKHKHKH')}</Text>

</View>

<View style={{width:64,height:0.5,backgroundColor:'#D5D5D5'}}>

</View>

</View>

 

<Text style={{marginTop:9,fontSize:12,color:"#A6A6A6"}}>{'HKHKHKHKHKHKHKH1'}</Text>

</View>

 

<Image source={{uri:"AppIcon"}} style={{position:'absolute',marginTop:10,width:45,height:45,borderRadius:22.5}} />

 

</View>

)