*强烈建议使用Genymotion模拟器,比AVD速度快,功能强大。
 
1. flexDirection
Flexbox是连续布局,它有主轴(primary axis)和交叉轴(cross axis)组成,使用flexDirection属性来确定主轴的方向,它包括水平(row)和垂直(column)两个值,默认是column。
 
1.1 水平布局
修改自动生成的代码文件,/index.android.js,
 
styles:
 
results:
 
1.2 垂直布局,修改L41,flexDirection:'column',
 
 
2. justifyContent,设置元素沿主轴的对齐方式,包括5种属性
2.1 flex-start:伸缩项目与父容器左端靠齐
    
2.2 flex-end:与父容器右端靠齐
    
2.3 center:水平居中
    
    
2.4 space-between:第一个子组件位于父容器左端,最后一个子组件位于父容器最右端。然后平均分配在父容器水平方向上
    
2.5 space-around:所有子组件平均分配在父容器的水平方向上,左右都有留空隙
    
 
3. 用于定义子组件在交叉轴方向上的对齐方式。有四个属性可设置:flex-start,flex-end,center,stretch。
我们需要设置元素的高度,
  
3.1 flex-start:与父组件的顶部对齐
    
3.2 flex-end:与父组件的底部对齐
    
3.3 center:处于父容器的中间位置
    
3.4 stretch:竖直上填充整个容器
    
 
4. flex,定义同级别元素的相对大小,它只关心相对值,比如下面的1:2:3,和10:20:30是一样的结果。
    修改内容如下,注意,在元素上直接添加样式时,别忘了加“[]”,参见L18和L22。
    
 
  运行结果,2的宽度是1的两倍,3的宽度是1的三倍
    
 
 
 

React Native - 2 控件Flexbox的更多相关文章

  1. 带着问题写React Native原生控件--Android视频直播控件

    最近在做的采用React Native项目有一个需求,视频直播与直播流播放同一个布局中,带着问题去思考如何实现,能更容易找到问题关键点,下面分析这个控件解决方法: 现在条件:视频播放控件(开源的ijk ...

  2. React Native图片控件的使用

    首先定义组件 import { AppRegistry, StyleSheet, Text, View, Image,} from 'react-native'; 然后将render返回中的模版增加I ...

  3. React Native(一) FlexBox布局

    欢迎转载,转载请标明出处: http://blog.csdn.net/johnny901114/article/details/53241550 本文出自:[余志强的博客] 在React Native ...

  4. React Native 学习(三)之 FlexBox 布局

    React Native 学习(三)之 FlexBox 布局

  5. React Native 开发之 (05) flexbox布局

    一  flexbox布局 1 flex布局 flexbox是ReactNative 应用开发中必不可少的内容,也是最常用的内容. 传统的页面布局是基于盒子模型,依赖定位属性,流动属性和显示属性来解决. ...

  6. React 表单控件onSubmit

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  7. React Native 教程:001 - 如何运行官方控件示例 App

    原文发表于我的技术博客 本文主要讲解了如何运行 React Native 官方控件示例 App,包含了一些 React Native 的基础知识以及相关环境的配置. 原文发表于我的技术博客 React ...

  8. 转 : React Native 开发之 IDE 选型和配置

    转:https://mp.weixin.qq.com/s?__biz=MzA3ODg4MDk0Ng==&mid=2651112392&idx=1&sn=135e29ddde30 ...

  9. React Native 入门到原理(详解)

    抛砖引玉(帮你更好的去理解怎么产生的 能做什么) 砖一.动态配置 由于 AppStore 审核周期的限制,如何动态的更改 app 成为了永恒的话题.无论采用何种方式,我们的流程总是可以归结为以下三部曲 ...

随机推荐

  1. Chromium之工程依赖关系.

    Chromium各版本可能有差异,我的版本是chromium.r197479,2013/08前后下载的source code. Visual Studio Ultimate版本有工具可以自动生成项目依 ...

  2. Lyft Level 5 Challenge 2018 - Final Round Div. 1没翻车记

    夜晚使人着迷.没有猝死非常感动. A:显然对于水平线段,只有横坐标的左端点为1的时候才可能对答案产生影响:对于竖直直线,如果要删一定是删去一段前缀.枚举竖直直线删到哪一条,记一下需要删几条水平线段就可 ...

  3. 【题解】CQOI2017老C的键盘

    建议大家还是不要阅读此文了,因为我觉得这题我的解法实在是又不高效又不优美……只是想要记录一下,毕竟是除了中国象棋之外自己做出的组合dp第一题~ 首先如果做题做得多,比较熟练的话,应该能一眼看出这题所给 ...

  4. [洛谷P4779]【模板】单源最短路径(标准版)

    题目大意:单元最短路径(卡$SPFA$) 题解:$dijkstra$($\underline{\hspace{0.5em}}\underline{\hspace{0.5em}}gnu\underlin ...

  5. 洛谷P4588 [TJOI2018]数学计算 【线段树】

    题目链接 洛谷P4588 题解 用线段树维护即可 #include<algorithm> #include<iostream> #include<cstring> ...

  6. 微信小程序使用原生WebSokcet实现断线重连及数据拼接

    以前做小程序为了应急找了个插件去链接WebSokcet,文章传送门. 回过头在新项目中再次使用时出现了些许问题,不一一赘述.遂决定好好用一下原生的WebSokcet. 一.说明 1.小程序原生的Web ...

  7. JS让任意图片垂直水平居中且页面不滚动

    说一下以前遇到的一个问题: 假设有一张小图,要实现点击查看大图的功能,而这个图的宽高可能会超过浏览器的宽高,这时候我们通过JS来改变图片的宽高,从而实现图片在浏览器居中显示且不滚屏. 方法如下: 首先 ...

  8. [ZJOI2005]午餐 (DP)

    [ZJOI2005]午餐 题目描述 上午的训练结束了,THU ACM小组集体去吃午餐,他们一行N人来到了著名的十食堂.这里有两个打饭的窗口,每个窗口同一时刻只能给一个人打饭.由于每个人的口味(以及胃口 ...

  9. Different Integers 牛客多校第一场只会签到题

    Given a sequence of integers a1, a2, ..., an and q pairs of integers (l1, r1), (l2, r2), ..., (lq, r ...

  10. Eclipse开发环境配置,打磨Eclipse,安装插件(适用3.4,3.5,3.6,3.7)

    转载自:http://elf8848.iteye.com/blog/354035 打磨Eclipse -- 磨刀不误砍柴工 -------------------------------------- ...