React-native学习过程 八 组件综合应用

我这次做一个综合应用View组件的例子，就是一个类似九宫格的图案，这是为了考验我们的布局能力
上代码：

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';import {  AppRegistry,  StyleSheet,  Text,  PixelRatio,  View} from 'react-native';export default class MyProject extends Component {    render(){        return (          <View style={styles.flex}>            <View style={styles.container}>                    <View style={[styles.item,styles.center]}>                        <Text style={styles.font}>酒店</Text>                    </View>                <View style={[styles.item,styles.lineLeftRight]}>                   <View style={[styles.flex,styles.center,styles.lineCenter]}>                       <Text style={styles.font}>海外酒店</Text>                   </View>                   <View style={[styles.flex,styles.center]}>                       <Text style={styles.font}>特惠酒店</Text>                   </View>                      </View>                <View style={styles.item}>                   <View style={[styles.flex,styles.center,styles.lineCenter]}>                       <Text style={styles.font}>团购</Text>                   </View>                   <View style={[styles.flex,styles.center]}>                       <Text style={styles.font}>客栈，公寓</Text>                   </View>                      </View>                 </View>          </View>        );    }    }const styles = StyleSheet.create({ container: {    marginTop:25,    marginLeft:5,    marginRight:5,    height:84,    flexDirection:'row',        borderRadius:5,    padding:2,    backgroundColor:'#FF0067',  },  item:{      flex:1,      height:80,  },  center:{      justifyContent:'center',      alignItems:'center',  },  flex:{      flex:1,  },  font:{      color:'#fff',      fontSize:16,      fontWeight:'bold',  },  lineLeftRight:{      borderLeftWidth:1/PixelRatio.get(),      borderRightWidth:1/PixelRatio.get(),      borderColor:'#fff',  },  lineCenter:{      borderBottomWidth:1/PixelRatio.get(),      borderColor:'#fff'  }});AppRegistry.registerComponent('MyProject', () => MyProject);

其实并不困难，只是因为需要美观，需要我们自己不断的调试样式，
再见