*强烈建议使用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. ActiveMQ使用详解---相关概念

    一.前言 公司之前使用activeMQ做过一款用于系统之间传递信息的工具,最近才正式投入生产使用,这期间出现了一些比较奇怪的问题,最终发现是没有清晰的了解activeMQ的相关配置以及一些相关概念,借 ...

  2. Object empty value key filter

    Object empty value key filter 过滤空值 Utils emptykeysFilter() "use strict"; /** * * @author x ...

  3. [Java] Java常见错误

    1.处理java错误"编码 GBK 的不可映射字符" (1)首先记事本打开java源文件 (2)然后另存为,选择ANSI编码 (3)覆盖 (4)再试一下,ok,编译通过.

  4. 2018-2-6考试(COCI2014/2015 Contest#5)

    T1:FUNGHI(1s,32M,50pts)得分:50 题意:给你8个数组成一个环,要你求出其中连续的4个数,让它们的和最大 题解:暴力求出每一连续4个数之和,比较一下就好 标签:模拟 C++ Co ...

  5. 【NOIP 模拟赛】中值滤波 打表找规律

    对于这样看起来不像什么算法也没什么知识点的题,一脸懵逼的话不是手推规律就是打表找规律......... 当然还有一些超出你能力之外的数学题...... #include <cstdio> ...

  6. Asp.net MVC Combres的简单用法

    第一步:添加nuget包 [1]添加 nuget包后,会自动在 webconfig里面 添加配置文件(不用改) <section name="dotless" type=&q ...

  7. shell脚本应用

    解析乱的日志文件到临时文件中,然后用awk  1004  cd /usr/local  1005  ll  1006  cd pttmsg/  1007  ll  1008  cd msgbin-2/ ...

  8. Educational Codeforces Round 55:B. Vova and Trophies

    B. Vova and Trophies 题目链接:https://codeforc.es/contest/1082/problem/B 题意: 给出一个“GS”串,有一次交换两个字母的机会,问最大的 ...

  9. MFC 对话框透明效果

    网上找的资料自己改了改,在这里记录和分享一下,主要是TransparentWnd函数. 在子类的OnShowWindow函数中调用 ShowWindowAlpha() #pragma once tem ...

  10. CSS3学习笔记之loading动画

    效果截图: HTML代码: <div class="divBox"> <div class="loader"> <div clas ...