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. vsftpd基于mysql的认证方式

    安装epel源: cd /etc/yum.repos.d wget http://mirrors.neusoft.edu.cn/epel/epel-release-latest-6.noarch.rp ...

  2. vSphere SDK for Java 示例

    示例代码: package com.vmware.event.connect; import java.net.MalformedURLException; import java.net.URL; ...

  3. MySQL中表复制:create table like 与 create table as select

    1    CREATE TABLE A LIKE B此种方式在将表B复制到A时候会将表B完整的字段结构和索引复制到表A中来. 2.    CREATE TABLE A AS SELECT * FROM ...

  4. Leetcode——Third Maximum Number

    Question Given a non-empty array of integers, return the third maximum number in this array. If it d ...

  5. 如何在repeater中找到checkbox并实现全选删除

    checkbox使用客户端控件,且给repeater里边的checkbox添加ruanat=server属性表头中的chkTotal的属性一定不要加此属性....然后 全选的javascript代码  ...

  6. springMVC多视图的支持

    1.在springmvc.xml中加上 <!-- 多视图的支持 --> <bean class="org.springframework.web.servlet.view. ...

  7. 07_ZkClient提供的API使用

    1. ZkClient API简介 zkclient是Github上一个开源的ZooKeeper客户端,在原生ZooKeeper API接口上进行包装,同时在内部实现了session超时重连,Watc ...

  8. hdu 4825 Xor Sum trie树

    Xor Sum Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 132768/132768 K (Java/Others) Proble ...

  9. Nginx 从0开始学

    作为一个 nginx 的初学者记录一下从零起步的点滴. 基本概念 Nginx 最常的用途是提供反向代理服务,那么什么反向代理呢?正向代理相信很多大陆同胞都在这片神奇的土地上用过了,原理大致如下图: 代 ...

  10. Template、ItemsPanel、ItemContainerStyle、ItemTemplate (部分内容有待验证)

    以下摘自“CSDN”的某人博客,部分内容有待验证,需注意“辨别学之....” 1.Template是指控件的样式 在WPF中所有继承自contentcontrol类的控件都含有此属性,(继承自Fram ...