react native 学习笔记之指定样式,宽,高

原创 2016年08月30日 21:23:50

样式style没啥好说的,可以用{}扩起来指定样式,也可以用StyleSheet.create来集中定义组件的样式。

给控件指定宽高其实也没啥好说的,可以指定绝对值,比如:

<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />

也可以指定 弹性(Flex)宽高。

在组件样式中使用flex可以使其在可利用的空间中动态地扩张或收缩。一般而言我们会使用flex:1来指定某个组件扩张以撑满所有剩余的空间。如果有多个并列的子组件使用了flex:1,则这些子组件会平分父容器中剩余的空间。如果这些并列的子组件的flex值不一样,则谁的值更大,谁占据剩余空间的比例就更大(即占据剩余空间的比等于并列组件间flex值的比)。

参考下面的例子:


<View style={{flex: 1}}>
        <View style={{flex: 1, backgroundColor: 'powderblue'}} /> //整体权重是三个子控件flex数字之和,则表示占六分之一
        <View style={{flex: 2, backgroundColor: 'skyblue'}} />    //占六分之2
        <View style={{flex: 3, backgroundColor: 'steelblue'}} />  //占六分之3.占了屏幕的一半高度
</View>

效果图:


关于flex的更多例子:可以参看我的下一篇文章react native 学习笔记----使用Flexbox布局




相关文章推荐

react-native之高度和宽度问题

react-native之高度和宽度问题

【React Native开发】React Native控件之View视图讲解(7)

(一)前言         现在几讲我们对于React Native一些基础做了相关讲解(例如:环境搭建,开发IDE,调试以及升级降级等),今天开始正式进入UI相关组件学习的阶段了。首先我们来讲一个非...

react native 实现动态高度Listview 和图文混排

当考虑这个动态高度和图文混排的问题,想必你已经知道如何加载ListView和分组listview,这里不再赘述... 这里简介实现的动态的高度的cell的思路 写一个ListView,准好数据源在re...

React-Native中的flexbox布局的使用

转载请标明出处: http://blog.csdn.net/hai_qing_xu_kong/article/details/72354208 本文出自:【顾林海的博客】 前言在编写Rea...

React Native 学习笔记六(关于宽高的设置)

继续在之前的例子上进行添加 尺寸 1.使用固定的尺寸  设置View容器  和设置自定义的组组件  如果父组件的空间不足  自控件的会出现重叠的情况 示例: import { AppRegist...

React Native 的布局(容器属性)

Flexbox 介绍 flexbox是由伸缩容器和伸缩项目组成。任何一个元素都可以使用flexbox布局。容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)...

04、react之 JSX中使用样式

1、JSX中使用样式     1、行内样式:写行内样式的时候需要使用两个{}  ==>{{}}     2、对象样式:在return前面定义一个样式对象,注意样式的写法,与HTML的不同点     3...

React Native布局详细指南

一款好的APP离不了一个漂亮的布局,本文章将向大家分享React Native中的布局方式FlexBox。  在React Native中布局采用的是FleBox(弹性框)进行布局。 Flex...

React Native 学习笔记(一)--init 项目 和 运行项目

首先,学习React Native首要的条件就是要有环境,至于怎么配置React Native大家可以在官网上按照步骤安装。不同的平台安装的步骤和需要的软件也不同,我这边是Windows环境(这里不说...

React Native for Android 学习笔记(一) 操蛋的环境搭建与demo运行

坑我踩了,你们别踩了
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:react native 学习笔记之指定样式,宽,高
举报原因:
原因补充:

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