/**

  * Sample React Native App

  * https://github.com/facebook/react-native

  * @flow

  */

 import React, { Component } from 'react';

 import {

   AppRegistry,

   StyleSheet,

   PixelRatio,

   Text,

   View

 } from 'react-native';

 export default class HelloWord extends Component {

   render() {

     return (

       <View style={styles.body}>

         <View style={[styles.container,styles.redColor]}>

           <View style={[styles.item,styles.center]}>

             <Text style={styles.font}>酒 店</Text>

           </View>

           <View style={[styles.item,styles.leftRightLine]}>

             <View style={[styles.center,styles.flex,styles.bottonLine]}>

               <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.bottonLine]}>

               <Text style={styles.font}>团购</Text>

             </View>

             <View style={[styles.center,styles.flex]}>

               <Text style={styles.font}>民宿*客栈</Text>

             </View>

           </View>

         </View> 

         <View style={[styles.container,styles.blueColor]}>

           <View style={[styles.item,styles.center]}>

             <Text style={styles.font}>机 票</Text>

           </View>

           <View style={[styles.item,styles.leftRightLine]}>

             <View style={[styles.center,styles.flex,styles.bottonLine]}>

               <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.bottonLine]}>

               <Text style={styles.font}>汽车票·船票</Text>

             </View>

             <View style={[styles.center,styles.flex]}>

               <Text style={styles.font}>专车·租车</Text>

             </View>

           </View>

         </View> 

         <View style={[styles.container,styles.greenColor]}>

           <View style={[styles.item,styles.center]}>

             <Text style={styles.font}>旅 游</Text>

           </View>

           <View style={[styles.item,styles.leftRightLine]}>

             <View style={[styles.center,styles.flex,styles.bottonLine]}>

               <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.bottonLine]}>

               <Text style={styles.font}>邮轮旅行</Text>

             </View>

             <View style={[styles.center,styles.flex]}>

               <Text style={styles.font}>定制旅行</Text>

             </View>

           </View>

         </View> 

         <View style={[styles.container,styles.yellowColor]}>

           <View style={styles.item}>

             <View style={[styles.center,styles.flex,styles.bottonLine]}>

               <Text style={styles.font}>景点·玩乐</Text>

             </View>

             <View style={[styles.center,styles.flex]}>

               <Text style={styles.font}>礼品卡</Text>

             </View>

           </View>

           <View style={[styles.item,styles.leftRightLine]}>

             <View style={[styles.center,styles.flex,styles.bottonLine]}>

               <Text style={styles.font}>美食林</Text>

             </View>

             <View style={[styles.center,styles.flex]}>

               <Text style={styles.font}>WiFi·电话卡</Text>

             </View>

           </View>

           <View style={[styles.item]}>

             <View style={[styles.center,styles.flex,styles.bottonLine]}>

               <Text style={styles.font}>购物·信用卡</Text>

             </View>

             <View style={[styles.center,styles.flex]}>

               <Text style={styles.font}>保险·签证</Text>

             </View>

           </View>

         </View>    

       </View>

     );

   }

 }

 const styles = StyleSheet.create({

   body:{

     flex:1,

   },

   flex:{

     flex:1,

   },

   container: {

     marginTop:1,

     marginLeft:1,

     marginRight:1,

     height:84,

     flexDirection:'row',

     borderRadius:5,

     padding:2,

   },

   redColor:{

     backgroundColor:'#FF0067',

   },

   blueColor:{

     backgroundColor:'#3d98ff',

   },

   greenColor:{

     backgroundColor:'#44c522',

   },

   yellowColor:{

     backgroundColor:'#fc9720',

   },

   item:{

     flex:1,

     height:80,

   },

   center:{

     justifyContent:'center',

     alignItems:'center',

   },

   font:{

     color:'#fff',

     fontSize:16,

     fontWeight:'bold',

   },

   leftRightLine:{

     borderLeftWidth:1/PixelRatio.get(),

     borderRightWidth:1/PixelRatio.get(),

     borderColor:'#fff',

   },

   bottonLine:{

     borderBottomWidth:1/PixelRatio.get(),

     borderColor:'#fff',

   },

 });

 AppRegistry.registerComponent('HelloWord', () => HelloWord);