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

最终运行效果：