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.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);//注册

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!