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 (
        
      
       
           酒店
       
       
           
               海外酒店
           
           
               特惠酒店
           
       
       
           
               团购
           
           
               客栈，公寓
           
       
      
          
    );
  }
}
//样式表
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);//注册