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 ...
随机推荐
- vsftpd基于mysql的认证方式
安装epel源: cd /etc/yum.repos.d wget http://mirrors.neusoft.edu.cn/epel/epel-release-latest-6.noarch.rp ...
- vSphere SDK for Java 示例
示例代码: package com.vmware.event.connect; import java.net.MalformedURLException; import java.net.URL; ...
- 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 ...
- Leetcode——Third Maximum Number
Question Given a non-empty array of integers, return the third maximum number in this array. If it d ...
- 如何在repeater中找到checkbox并实现全选删除
checkbox使用客户端控件,且给repeater里边的checkbox添加ruanat=server属性表头中的chkTotal的属性一定不要加此属性....然后 全选的javascript代码 ...
- springMVC多视图的支持
1.在springmvc.xml中加上 <!-- 多视图的支持 --> <bean class="org.springframework.web.servlet.view. ...
- 07_ZkClient提供的API使用
1. ZkClient API简介 zkclient是Github上一个开源的ZooKeeper客户端,在原生ZooKeeper API接口上进行包装,同时在内部实现了session超时重连,Watc ...
- hdu 4825 Xor Sum trie树
Xor Sum Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 132768/132768 K (Java/Others) Proble ...
- Nginx 从0开始学
作为一个 nginx 的初学者记录一下从零起步的点滴. 基本概念 Nginx 最常的用途是提供反向代理服务,那么什么反向代理呢?正向代理相信很多大陆同胞都在这片神奇的土地上用过了,原理大致如下图: 代 ...
- Template、ItemsPanel、ItemContainerStyle、ItemTemplate (部分内容有待验证)
以下摘自“CSDN”的某人博客,部分内容有待验证,需注意“辨别学之....” 1.Template是指控件的样式 在WPF中所有继承自contentcontrol类的控件都含有此属性,(继承自Fram ...