React-Native基础_3.Flex布局
Flex布局介绍 /** * Sample React Native App * https://github.com/facebook/react-native * @flow */ 'use strict' import React, {Component} from 'react'; import { AppRegistry, StyleSheet, Text, View } from 'react-native'; //import {AppRegistry,} from 'react-native'; //import Day0718 from './componets/Home' export default class Day0718 extends Component { render() { return ( <View style={styles.Container}> <View style={[styles.item ,styles.itemOne]}> <Text style={styles.itemText}>1</Text> </View> <View style={[styles.item ,styles.itemTwo]}> <Text style={styles.itemText}>2</Text> </View> <View style={[styles.item ,styles.itemThree]}> <Text style={styles.itemText}>3</Text> </View> </View> ); } } const styles = StyleSheet.create({ item:{ backgroundColor:'#fff', borderWidth:1, borderColor:'#6435c9', margin:6, flex:1, }, itemOne:{ // alignSelf:'flex-start', }, itemTwo:{ //alignSelf:'center', }, itemThree:{ flex:2, }, itemText:{ fontSize:33, fontFamily:'Helvetica Neue', fontWeight:'200', color:'#6435c9', padding:30, }, Container: { //alignItems:'flex-start',// flex-start 靠在左边显示 center 居中 flex-end 尾部 // flexDirection:'column',//row column 方向 backgroundColor: '#eae7ff', flex: 1, //justifyContent:'center',//center ; 居中 flex-end 位于底部 space-between/space-around屏幕平均分配 }, Text: { color: '#6435c9', fontSize: 26, textAlign: 'center', fontStyle: 'italic', letterSpacing: 2, lineHeight: 33, fontFamily: 'Helvetica Neue', fontWeight: '300', textDecorationLine: 'underline', textDecorationStyle: 'dashed', }, }); AppRegistry.registerComponent('Day0718', () => Day0718);
Flex布局是React-Native 中常用的布局语法。
React-Native基础_3.Flex布局的更多相关文章
- React Native基础&入门教程:初步使用Flexbox布局
在上篇中,笔者分享了部分安装并调试React Native应用过程里的一点经验,如果还没有看过的同学请点击<React Native基础&入门教程:调试React Native应用的一小 ...
- react native基础与入门
react native基础与入门 一.react native 的优点 1.跨平台(一才两用) 2.低投入高回报 (开发成本低.代码复用率高) 3.性能高:拥有独立的js渲染引擎,比传统的h5+ w ...
- React Native 中的 Flex Box 的用法(水平布局、垂直布局、水平居中、垂直居中、居中布局)
版权声明:本文仅供个人学习. CSS 中 Flex-Box 语法链接 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html Flex 是 ...
- 3、手把手教React Native实战之flexbox布局
flexbox是Flexible Box的缩写,弹性盒子布局 主流的浏览器都支持 flexbox布局是伸缩容器(container)和伸缩项目(item)组成 Flexbox布局的主体思想是元素可以 ...
- 跨平台框架与React Native基础
跨平台框架 什么是跨平台框架? 这里的多个平台一般是指 iOS 和 Android . 为什么需要跨平台框架? 目前,移动开发技术主要分为原生开发和跨平台开发两种.其中,原生应用是指在某个特定的移动平 ...
- React Native基础&入门教程:以一个To Do List小例子,看props和state
本文由葡萄城技术团队于博客园原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 在上篇中,我们介绍了什么是Flexbox布局,以及如何使用Flexb ...
- 4、手把手教React Native实战之flexbox布局(伸缩属性)
###伸缩项目的属性 1.order 定义项目的排列顺序,数值越小,排列越靠前,默认值为0,语法为:order:整数值 2.flex-grow 定义伸缩项目的放大比例,默认值为0,即表示如果存在剩余空 ...
- React Native基础&入门教程:调试React Native应用的一小步
React Native(以下简称RN)为传统前端开发者打开了一扇新的大门.其中,使用浏览器的调试工具去Debug移动端的代码,无疑是最吸引开发人员的特性之一. 试想一下,当你在手机屏幕按下一个按钮, ...
- React Native基础概念和基础认识
学习地址:https://github.com/vczero/react-native-lesson 当我们初始化一个RN项目的时候主要的是index.ios.js文件和index.android.j ...
随机推荐
- Bag类的接口的实现与测试(课上测试补做)
Bag类的接口的实现与测试(课上测试补做) 截图 由于截图有一定的的限制就没有吧所有的代码截进去,后面有代码. 代码 package ClassTest; import java.util.Objec ...
- Servlet3.0异步请求
在Servlet3.0之前,Servlet采用Thread-Per-Request的方式处理请求 即每次Http请求都有一个线程从头到尾负责处理 如果一个请求需要进行IO操作,比如访问数据库.调用第三 ...
- hdu1009 - 贪心
2017-07-14 18:18:31 writer:pprp 介绍:hdu1009 题目介绍,详见hdu1009 代码如下 #include <iostream> #include &l ...
- hiho#1080 更为复杂的买卖房屋姿势 线段树+区间更新
#1080 : 更为复杂的买卖房屋姿势 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi和小Ho都是游戏迷,“模拟都市”是他们非常喜欢的一个游戏,在这个游戏里面他们 ...
- Linux安装jdk、删除Open jdk
1.将jdk解压安装完成后,在bin目录下查看当前jdk的版本号 命令: ./java -version 2.编辑修改配置 1. 修改profile文件 进入命令: vi /etc/profil ...
- java 位数补0处理(转)
数据库中表的ID为4位数字,如:0001,0012,0123,1234 如果插入的值不满足4位,需要进行转换,有两种方法 第一种方法以: int n = 1; NumberFormat ...
- MySQL行锁、间隙锁、Next-Key锁
InnoDB是一个支持行锁的存储引擎,它有三种行锁的算法: Record Lock:行锁,单个行记录上的锁. Gap Lock:间隙锁,锁定一个范围,但不包括记录本身.GAP锁的目的,是为了防止幻读. ...
- MySQL 乐观锁 悲观锁 共享锁 排他锁
乐观锁 乐观锁是逻辑概念上的锁,不是数据库自带的,需要我们自己去实现.乐观锁是指操作数据库时(更新操作),想法很乐观,认为这次的操作不会导致冲突,在操作数据时,并不进行任何其他的特殊处理(也就是不加锁 ...
- JQuery常用和很有用处的方法
1.grep()方法: 用于数组元素过滤筛选 grep(array,callback,invert) array:待过滤数组; callback:处理数组中的每个元素,并过滤元素,该函数中包含两个参数 ...
- python学习大纲目录(转自alex博客https://www.cnblogs.com/alex3714/)
day01: 介绍.基本语法.流程控制 Python介绍 发展史 Python 2 or 3? 安装 Hello World程序 变量 用户输入 模块初识 .pyc是个什么鬼? 数据类型初识 数据运算 ...