react-native布局demo1

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

实现效果如下：