/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
TextInput,
PixelRatio,
View
} from 'react-native';
export default class hello2017 extends Component {
render() {
return (
<View style={styles.main}>
<View style={styles.container}>
<View style={[styles.item,styles.center]}>
<Text style={styles.font}>酒店</Text>
</View>
<View style={styles.item,styles.lineRight}>
<View style={[styles.center,styles.flex,styles.padding,styles.lineBottom]}>
<Text style={styles.font}>旅行</Text>
</View>
<View style={[styles.center,styles.flex]}>
<Text style={styles.font}>美食</Text>
</View>
</View>
<View style={styles.item}>
<View style={[styles.center,styles.flex,styles.lineBottom]}>
<Text style={styles.font}>团购</Text>
</View>
<View style={[styles.center,styles.flex,styles.marginTops]}>
<Text style={styles.font}>酒店,客栈</Text>
</View>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
main:{
flex:1,
},
container: {
// flex: 1 意味着要铺满整个屏幕
borderWidth:1,
borderColor:'white',
//里面的view排列方式是按照行的方式排列的
flexDirection:'row',
borderRadius:10,
marginTop:5,
marginLeft:5,
marginRight:5,
backgroundColor:'#FF99FF',
height:89,
paddingTop:6,
paddingBottom:6
},
item: {
flex: 1,
height:80,
// borderWidth:1,
borderColor:'blue',
},
center: {
//使得其中的文字垂直居中
justifyContent:'center',
//使得其中的文字水平居中
alignItems:'center',
},
flex:{
flex:1,
},
font:{
color:'white',
fontSize:16,
fontWeight:'bold',
},
lineRight:{
//获取左边宽度,类似像素,需要导入组件PixelRatio
borderLeftWidth:1/PixelRatio.get()+1,
borderRightWidth:1/PixelRatio.get()+1,
borderColor:'white',
},
lineBottom:{
borderBottomWidth:1/PixelRatio.get(),
borderColor:'white',
flex:1,
alignItems:'center',
justifyContent:'center'
},
padding:{
paddingLeft:30,
paddingRight:30
},
marginTops:{
marginTop:5
}
});
AppRegistry.registerComponent('hello2017', () => hello2017);
实现效果如下: