reactNative中View组件的简单使用（六）

在ReactNative里有一个类似于div的组件，那就是view组件，支持多层嵌套，支持flexbox布局

实现效果如图：

1.加载view组件

2.创建组件

3.添加样式表

4.注册入口

5.外层布局

6.flex水平三栏布局

7.上下两栏布局

8.完善效果

import React, { Component } from 'react';
import {//组件API
  AppRegistry,
  StyleSheet,
  PixelRatio,
  Text,
  View
} from 'react-native';

export default class FirstRN 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: {
    //backgroundColor: '#F5FCFF',
      marginTop:200,
      marginLeft:10,
      marginRight:10,
      height:84,
      flexDirection:"row",
      borderRadius:5,
      padding:2,
      backgroundColor:'#ff0067'
  },
  font:{
      color:"#fff",
      fontSize:16,
      fontWeight:"bold"
  },
  lineLeftRight:{
      borderLeftWidth:1/PixelRatio.get(),
      borderRightWidth:1/PixelRatio.get(),
      borderColor:'#fff'
  },
  linecenter:{//导入PixelRatio组件API
      borderColor:'#fff',
      borderBottomWidth:1/PixelRatio.get(),
  },
  item:{
    flex:1,//全部充满
      height:80,

  },
    flex:{
      flex:1,
    },
    center:{
    justifyContent:'center',
        alignItems:'center',
    },
});

AppRegistry.registerComponent('FirstRN', () => FirstRN);//注册