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 学习笔记六(关于宽高的设置)

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

react-native之高度和宽度问题

react-native之高度和宽度问题
  • u013147860
  • u013147860
  • 2017年03月25日 18:06
  • 2616

react native学习笔记19——常用API(1)Dimensions、PixelRatio获取屏幕宽高及单位换算

Dimensions在React Native中通常使用Dimensions获取屏幕宽高。Dimensions的方法Dimensions的使用很简单,它只提供了两个方法: static set(dim...
  • teagreen_red
  • teagreen_red
  • 2017年12月11日 18:43
  • 229

react native学习笔记17——存储篇(2)SQLite

前言对于存放数据量小且简易的数据我们可以通过AsyncStorage来存储,但对于数据结构复杂、数据量大的数据,我们可以使用移动开发中常用的SQLite来处理。 SQLite是一种轻型的数据库,多用...
  • teagreen_red
  • teagreen_red
  • 2017年11月15日 18:53
  • 674

React Native 学习笔记十一(页面跳转)

React Native  内置了几个导航器组件 推荐使用Navigator  (原因:它是单独使用js实现的一个导航栈 因此 可以跨平台操作 同时便于定制) 场景: 场景   通俗的讲就是整个...
  • Youth_never_go_away
  • Youth_never_go_away
  • 2016年09月18日 10:19
  • 5360

React-Native学习笔记 使用ListView加载网络数据

react-native学习笔记: 使用ListView加载网络数据
  • a1018875550
  • a1018875550
  • 2017年04月08日 18:42
  • 354

React Native 学习笔记-iOS(一)

一,react native 环境的配置安装,可以参照react native 中文网,这里不累述 http://reactnative.cn/docs/0.28/getting-started.h...
  • aisjimoxue
  • aisjimoxue
  • 2016年07月19日 14:50
  • 1197

React Native 学习笔记十四(原生模块之数据回调)

在使用原生模块的时候无法避免数据的获取  关于数据的获取 我这里模仿了网络请求获取数据 通过回调的方式 完成数据从java到js的传递 官网上 基本上都是坑 写这篇文章给想我一样的小白来看  大神级别...
  • Youth_never_go_away
  • Youth_never_go_away
  • 2016年09月20日 17:07
  • 1468

react native 学习笔记----封装Android的原生组件

参考文档官方版:Native UI Components 中文版:原生UI组件 上面的文档介绍了facebook 开发小组,如何封装原生组件ImageView给js调用,但是没有具体的实例,按照上面的...
  • wxq888
  • wxq888
  • 2016年09月29日 16:29
  • 1753

React-Native学习笔记之:Fetch网络请求

fetch是React Native中的网络请求中最为简单的方法,可以实现大多数的网络请求。把学习的相关知识记录一下:FetchDemo.js文件import React, {Component} f...
  • true100
  • true100
  • 2017年03月23日 11:16
  • 677
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:react native 学习笔记之指定样式,宽,高
举报原因:
原因补充:

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