react-native 列式布局 行式布局

原创 2018年04月17日 14:52:26
/**
* Create by bamboo on 2018-04-13
* 页面布局
*/
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
} from 'react-native';


export default class App extends Component {
constructor(props) {
super(props);
this.state = {
};
}

render() {
return (
<View style={styles.body}>
<Text>列式布局</Text>
<View style={styles.row}>
<View style={styles.r1}></View>
<View style={styles.r2}></View>
</View>

<Text>行式布局</Text>
<View style={styles.column}>
<View style={styles.c1}></View>
<View style={styles.c2}></View>
</View>
</View>
);
}
}

const styles = StyleSheet.create({
body:{
},
row:{
flexDirection:'row',
height:50,
},
r1:{
flex:1,
backgroundColor:'#33ccff',
},
r2:{
flex:2,
backgroundColor:'#FF34B3',
},
column:{
flexDirection:'column',
height:50,
},

c1:{
flex:1,
backgroundColor:'#33ccff',
},
c2:{
flex:2,
backgroundColor:'#FF34B3',
},

});

结果如下:



版权声明:竹子原创,未经允许不得转载 https://blog.csdn.net/u010411264/article/details/79974829

行式数据库 VS 列式数据库

行式数据库 VS 列式数据库
  • ggxxkkll
  • ggxxkkll
  • 2014-03-15 16:05:55
  • 7039

列式数据库与行式数据库

什么是列式数据库? 列式数据库是以列相关存储架构进行数据存储的数据库。卢东明认为数据库发展已经到了一个新阶段,数据库市场需要细分,行式数据库不再满足所有的需求,而有很多需求需要通过内存数据库和列式数...
  • s646575997
  • s646575997
  • 2016-05-16 11:19:13
  • 2051

一分钟搞懂列式与行式数据库

行式与列式的区别和应用场景。
  • qq_35952082
  • qq_35952082
  • 2017-03-30 17:32:39
  • 2977

一图理解行式数据库和列式数据库的区别

  • Fabuler
  • Fabuler
  • 2016-09-28 10:45:39
  • 642

Hbase与Oracle比较(列式数据库与行式数据库)

1、 Hbase适合大量插入同时又有读的情况 2、 Hbase的瓶颈是硬盘传输速度,Oracle的瓶颈是硬盘寻道时间。   Hbase本质上只有一种操作,就是插入,其更新操作是插入一个带有新的时间...
  • allen879
  • allen879
  • 2014-10-26 21:17:57
  • 20107

列式存储与行式存储

以前不是特别明白列式存储和行式存储到底有什么区别,对于突然蹦出来的BigTable、HBase、Cassandra这些NoSQL数据库凭什么比MySQL集群,Oracle在分析存储上的强大?思来可以这...
  • judyge
  • judyge
  • 2015-11-10 11:38:59
  • 1503

React-Native中的flexbox布局的使用

转载请标明出处: http://blog.csdn.net/hai_qing_xu_kong/article/details/72354208 本文出自:【顾林海的博客】 前言在编写Rea...
  • GULINHAI12
  • GULINHAI12
  • 2017-05-24 01:54:03
  • 3003

react-native 之布局总结

前言之前我们讲了很多react-native的基础控件,为了方便大家的理解,我们来对react-native的布局做一个总结,观看本节知识,你将看到。 宽度单位和像素密度 flex的布局 图片布局 绝...
  • xiangzhihong8
  • xiangzhihong8
  • 2017-01-17 22:25:44
  • 5644

三列布局的几种方式

一、绝对定位法两边用绝对定位,中间用margin,左右宽度固定,中间宽度不固定,中间主体放在左栏右栏后面(中间栏会占据整行) .left{ width:400px; heig...
  • YuLi_Zoe
  • YuLi_Zoe
  • 2015-09-24 15:37:45
  • 1470

HTML&CSS三列布局

1.利用margin值为负数 左右宽度固定中间自适应 测试页 body{ margin: 0; padding: 0; } .main{ back...
  • u011121046
  • u011121046
  • 2016-07-06 21:51:06
  • 2875
收藏助手
不良信息举报
您举报文章:react-native 列式布局 行式布局
举报原因:
原因补充:

(最多只允许输入30个字)