~~~
/**
*
*简单的flex布局上下左右
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
PixelRatio,
} from 'react-native';
class hotelView extends Component {
render() {
return (
<View style={styles.container}>
<View style={[styles.item,styles.center,styles.borderRightStyle]}>
<Text style={styles.fontStyle}>境内酒店</Text>
</View>
<View style={[styles.item,styles.borderRightStyle]}>
<View style={[styles.flex,styles.midHeight,styles.borderBottomStyle]}>
<Text style={[styles.fontStyle]}>境外酒店</Text>
</View>
<View style={[styles.flex,styles.midHeight,styles.borderBottomStyle]}>
<Text style={[styles.fontStyle]}>境外酒店</Text>
</View>
</View>
<View style={[styles.item,styles.center]}>
<Text style={styles.fontStyle}>景区酒店</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flexDirection:'row',
width:300,
backgroundColor:'rgb(231,126,35)',
borderRadius:6
},
item:{
flex:1,
height:80,
},
flex:{
flex:1
},
center:{
alignItems:'center',
justifyContent:'center'
},
fontStyle:{
fontSize:14,
color:'#fff'
},
borderRightStyle:{
borderRightWidth:1/PixelRatio.get(),
borderRightColor:'#fff'
},
borderBottomStyle:{
borderBottomWidth:1/PixelRatio.get(),
borderBottomColor:'#fff'
},
midHeight:{
flex:1,
alignItems:'center',
justifyContent:'center'
}
});
module.exports=hotelView;
~~~
