React-Native（四）：React Native之View学习

React Native实现以下布局效果:携html5(http://m.ctrip.com/html5/)

基于HelloWord修改项目代码：

 /**
  * 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);

最终运行效果：