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布局的更多相关文章

  1. React Native基础&入门教程:初步使用Flexbox布局

    在上篇中,笔者分享了部分安装并调试React Native应用过程里的一点经验,如果还没有看过的同学请点击<React Native基础&入门教程:调试React Native应用的一小 ...

  2. react native基础与入门

    react native基础与入门 一.react native 的优点 1.跨平台(一才两用) 2.低投入高回报 (开发成本低.代码复用率高) 3.性能高:拥有独立的js渲染引擎,比传统的h5+ w ...

  3. React Native 中的 Flex Box 的用法(水平布局、垂直布局、水平居中、垂直居中、居中布局)

     版权声明:本文仅供个人学习. CSS 中 Flex-Box 语法链接 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html Flex 是 ...

  4. 3、手把手教React Native实战之flexbox布局

    flexbox是Flexible Box的缩写,弹性盒子布局  主流的浏览器都支持 flexbox布局是伸缩容器(container)和伸缩项目(item)组成 Flexbox布局的主体思想是元素可以 ...

  5. 跨平台框架与React Native基础

    跨平台框架 什么是跨平台框架? 这里的多个平台一般是指 iOS 和 Android . 为什么需要跨平台框架? 目前,移动开发技术主要分为原生开发和跨平台开发两种.其中,原生应用是指在某个特定的移动平 ...

  6. React Native基础&入门教程:以一个To Do List小例子,看props和state

    本文由葡萄城技术团队于博客园原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 在上篇中,我们介绍了什么是Flexbox布局,以及如何使用Flexb ...

  7. 4、手把手教React Native实战之flexbox布局(伸缩属性)

    ###伸缩项目的属性 1.order 定义项目的排列顺序,数值越小,排列越靠前,默认值为0,语法为:order:整数值 2.flex-grow 定义伸缩项目的放大比例,默认值为0,即表示如果存在剩余空 ...

  8. React Native基础&入门教程:调试React Native应用的一小步

    React Native(以下简称RN)为传统前端开发者打开了一扇新的大门.其中,使用浏览器的调试工具去Debug移动端的代码,无疑是最吸引开发人员的特性之一. 试想一下,当你在手机屏幕按下一个按钮, ...

  9. React Native基础概念和基础认识

    学习地址:https://github.com/vczero/react-native-lesson 当我们初始化一个RN项目的时候主要的是index.ios.js文件和index.android.j ...

随机推荐

  1. Bag类的接口的实现与测试(课上测试补做)

    Bag类的接口的实现与测试(课上测试补做) 截图 由于截图有一定的的限制就没有吧所有的代码截进去,后面有代码. 代码 package ClassTest; import java.util.Objec ...

  2. Servlet3.0异步请求

    在Servlet3.0之前,Servlet采用Thread-Per-Request的方式处理请求 即每次Http请求都有一个线程从头到尾负责处理 如果一个请求需要进行IO操作,比如访问数据库.调用第三 ...

  3. hdu1009 - 贪心

    2017-07-14 18:18:31 writer:pprp 介绍:hdu1009 题目介绍,详见hdu1009 代码如下 #include <iostream> #include &l ...

  4. hiho#1080 更为复杂的买卖房屋姿势 线段树+区间更新

    #1080 : 更为复杂的买卖房屋姿势 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi和小Ho都是游戏迷,“模拟都市”是他们非常喜欢的一个游戏,在这个游戏里面他们 ...

  5. Linux安装jdk、删除Open jdk

    1.将jdk解压安装完成后,在bin目录下查看当前jdk的版本号 命令: ./java -version 2.编辑修改配置 1. 修改profile文件 进入命令:   vi  /etc/profil ...

  6. java 位数补0处理(转)

    数据库中表的ID为4位数字,如:0001,0012,0123,1234 如果插入的值不满足4位,需要进行转换,有两种方法 第一种方法以: int n = 1;         NumberFormat ...

  7. MySQL行锁、间隙锁、Next-Key锁

    InnoDB是一个支持行锁的存储引擎,它有三种行锁的算法: Record Lock:行锁,单个行记录上的锁. Gap Lock:间隙锁,锁定一个范围,但不包括记录本身.GAP锁的目的,是为了防止幻读. ...

  8. MySQL 乐观锁 悲观锁 共享锁 排他锁

    乐观锁 乐观锁是逻辑概念上的锁,不是数据库自带的,需要我们自己去实现.乐观锁是指操作数据库时(更新操作),想法很乐观,认为这次的操作不会导致冲突,在操作数据时,并不进行任何其他的特殊处理(也就是不加锁 ...

  9. JQuery常用和很有用处的方法

    1.grep()方法: 用于数组元素过滤筛选 grep(array,callback,invert) array:待过滤数组; callback:处理数组中的每个元素,并过滤元素,该函数中包含两个参数 ...

  10. python学习大纲目录(转自alex博客https://www.cnblogs.com/alex3714/)

    day01: 介绍.基本语法.流程控制 Python介绍 发展史 Python 2 or 3? 安装 Hello World程序 变量 用户输入 模块初识 .pyc是个什么鬼? 数据类型初识 数据运算 ...