View组件

来源：互联网发布：怎么查看手机mac地址编辑：程序博客网时间：2024/04/30 05:32
View 组件

这里写图片描述
代码实现

import React, { Component } from 'react';import {  AppRegistry,  StyleSheet,  Text,  View} from 'react-native';var HelloReactNative = React.createClass({  render:function () {    return(      <View style={[styles.flex,styles.container]}>        <View style={styles.item}>          <View style={[styles.flex,styles.center]}>            <Text>酒店</Text>          </View>            <View style={[styles.flex,styles.lineLeftRight]}>              <View style={[styles.flex,styles.center,styles.lineCenter]}>                <Text>海外酒店</Text>              </View>              <View style={[styles.flex,styles.center]}>                <Text>特价酒店</Text>              </View>            </View>            <View style={[styles.flex]}>              <View style={[styles.flex,styles.center,styles.lineCenter]}>                <Text>团购</Text>              </View>              <View style={[styles.flex,styles.center]}>                <Text>民宿.客栈</Text>              </View>            </View>        </View>      </View>    );  }});var styles = StyleSheet.create({  container:{    margin:25,    backgroundColor:"#F2F2F2"  },  //多个子组件都需要设置  flex:{     flex:1  },  //多个组件需要设置  center:{    justifyContent:"center",    alignItems:"center"  },  item:{    flexDirection:"row",    backgroundColor:"#FF607C",    marginTop:5,    marginLeft:5,    marginRight:5,    height:80,    borderRadius:5  },  //给中间的区域设置左右边域  lineLeftRight:{     borderLeftWidth:1,     borderRightWidth:1,     borderColor:"white"  },  //给上半区域设置下边线  lineCenter:{    borderBottomWidth:1,    borderColor:"white"  }});AppRegistry.registerComponent('HelloReactNative', () => HelloReactNative);
阅读全文
0 0