React Native - 2 控件Flexbox

*强烈建议使用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的三倍

时间: 2024-10-27 13:51:48

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

React Native(一) FlexBox布局

欢迎转载,转载请标明出处: http://blog.csdn.net/johnny901114/article/details/53241550 本文出自:[余志强的博客] 在React Native中主要使用FlexBox来布局. 安装过React Native的开发环境的就知道,在index.android.js/index.ios.js的文件内容如下: export default class TemplateDemo extends Component { render() { retu

Robotium源码解读-native/webview控件的获取和操作

之前基本上没接触过移动端的UITest测试,之前因为一些需求临时赶鸭子上架采用了UIAutomator,但是后来发现webview没办法识别,在预研过程中,发现Robotium跟Appium这两个神器.由于Robotium提供了webview的解析方式,遂决定研究一下. 一.环境准备以及初始化 用来说明的用例采用的是Robotium官网的一个tutorial用例-Notepad @RunWith(AndroidJUnit4.class) public class NotePadTest { pr

React Native 开发之 (08) FlexBox例子

1 example1 RectNative View demo 参考 http://reactnative.cn/docs/0.31/view.html#content index.ios.js import React, { Component } from 'react'; import { AppRegistry,//注册 StyleSheet,//样式 Text, //文本组件 View, //视图组件 } from 'react-native'; class ADemo extends

React Native 开发之 (05) flexbox布局

一  flexbox布局 flexbox是ReactNative 应用开发中必不可少的内容,也是最常用的内容. 传统的页面布局是基于盒子模型,依赖定位属性,流动属性和显示属性来解决.对于一些伸缩性的布局,处理起来很是麻烦.于是在2009年,W3C组织提出来一种新的布局方案,既flex布局.

我的 React Native 技能树点亮计划 の React Native 开发 IDE 选型和配置

@author ASCE1885的 Github 简书 微博 CSDN 知乎 本文首发于 InfoQ 移动技术公众号:移动开发前线 由于潜在的商业目的,未经许可不开放全文转载许可,谢谢! React Native 发布一年多了,有不少公司已经在线上产品中或小范围试水,或大范围应用,很多公司或开发者都在为 React Native 的生态系统作出自己的贡献.React Native 的开发基本上是 Javascript + 系统原生开发语言(Java,Objective-C,Swift),原生语言

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

转:https://mp.weixin.qq.com/s?__biz=MzA3ODg4MDk0Ng==&mid=2651112392&idx=1&sn=135e29ddde3050d469be98db815c267e&scene=0&key=18e81ac7415f67c4bcc2eaac3ca13f8d294ec1b8fa5828d4d7f13f2e81cc62f72e55e828ee04e2002284521336a3766d&ascene=0&

React Native 调研报告

Facebook三月份开源了React Native iOS平台的框架,让移动开发人员和web开发者都各自兴奋了一把:native的移动开发者想的比较多的估计是Facebook的那句:"learn once, write everywhere",而web开发者兴奋的估计是,不需要学习iOS那陌生的OC或者swift语言,用自己熟悉的javascript语言就可以开发原生的移动APP了.那么新推出的react native 能否承载的了两大阵营的开发者的期待了.本人及同事对react n

ReactJs和React Native的那些事

介绍 1,React Js的目的 是为了使前端的V层更具组件化,能更好的复用,它能够使用简单的html标签创建更多的自定义组件标签,内部绑定事件,同时可以让你从操作dom中解脱出来,只需要操作数据就会改变相应的dom. 2,React Native的目的 是希望我们能够使用前端的技术栈就可以创建出能够在不同平台运行的一个框架.可以创建出在移动端运行的app,但是性能可能比原声app差一点. 3,ReactJs和React Native的原理是相同的,都是由js实现的虚拟dom来驱动界面view层

React Native 中 ScrollView 性能探究

1 基本使用 ScrollView 是 React Native(后面简称:RN) 中最常见的组件之一.理解 ScrollView 的原理,有利于写出高性能的 RN 应用. ScrollView 的基本使用也非常简单,如下: ... 它和 View 组件一样,可以包含一个或者多个子组件.对子组件的布局可以是垂直或者水平的,通过属性 horizontal=true/false 来控制.甚至还默认支持"下拉"刷新操作.另外还有一个特别赞的特性,超出屏幕的 View 会自动被移除,从而节省资