import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
} from 'react-native'; class helloworld extends Component {
render() {
return (
<View style={styles.style_0}>
<View style = {styles.styleView}>
<Text style={styles.style_text}>自由摆放</Text>
</View> <View style={[styles.styleView ,styles.centerView]}>
<Text style={styles.style_text}>居中显示</Text>
</View> <View style={[styles.styleView,styles.rightView]}>
<Text style={styles.style_text}>居右显示</Text>
</View> <View style={[styles.styleView,styles.leftView]}>
<Text style={styles.style_text}>居左显示</Text>
</View> <View style={[styles.styleView,styles.autoView,{marginTop:20}]}>
<Text style={styles.style_text}>自动显示</Text>
</View> <View style={[styles.styleView,styles.stretchView,{marginTop:20}]}>
<Text style={styles.style_text}>伸展显示</Text>
</View>
<View style={styles.vertical_centerView}>
<Text style={styles.style_text}>垂直居中显示显示</Text>
</View>
</View>
);
}
} const styles = StyleSheet.create({
style_0:{
flex:1,
borderColor:'red',
borderWidth:2,
},
styleView:{
width:100,
height:50,
backgroundColor:'blue'
},
style_text:{
color:'white',
marginTop:18,
textAlign:'center',
},
centerView:{
alignSelf:'center',
},
rightView:{
alignSelf:'flex-end',
},
leftView:{
alignSelf:'flex-start'
},
autoView:{
alignSelf:'auto'
},
stretchView:{
alignSelf:'stretch'
},
vertical_centerView:{
flex:1,
borderColor:'red',
borderWidth:2,
justifyContent:'center',
alignItems:'center',
}, }); AppRegistry.registerComponent('小棚', () => helloworld);

  运行结果

React-Native需要css和布局-20160902的更多相关文章

  1. React Native 中 CSS 的使用

    首先声明,此文原作者为黎 跃春 React Native中CSS 内联样式 对象样式 使用Stylesheet.Create 样式拼接 导出样式对象 下面的代码是index.ios.js中的代码: / ...

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

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

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

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

  4. React Native入门 认识Flexbox布局

    Flexbox布局是由W3C在09年提出的在Web端取代CSS盒子模型的一种布局方式. ReactNative实现了Flexbox布局的大部分功能. Flexbox布局所使用的属性,基本可以分为两大类 ...

  5. React Native的ListView的布局使用

    1> ListView组件用于显示一个垂直的滚动列表,其中的元素之间结构近似而仅数据不同. ListView更适于长列表数据,且元素个数可以增删.和ScrollView不同的是,ListView ...

  6. 从web移动端布局到react native布局

    在web移动端通常会有这样的需求,实现上中下三栏布局(上下导航栏位置固定,中间部分内容超出可滚动),如下图所示: 实现方法如下: HTML结构: <div class='container'&g ...

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

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

  8. React Native布局

    一款好的APP离不了一个漂亮的布局,本文章将向大家分享React Native中的布局方式FlexBox. 在React Native中布局采用的是FleBox(弹性框)进行布局. FlexBox提供 ...

  9. React Native探索(四)Flexbox布局详解

    相关文章 React Native探索系列 前言 在Android开发中我们有很多种布局,比如LinearLayout和RelativeLayout,同样在React Native也有它的布局,这个布 ...

随机推荐

  1. WebService -- Java 实现之 CXF ( 使用:Spring+CXF+Tomcat发布webService)

    1. 新建一个Maven项目,选择webapp模板,命名为WS_Spring_CXF_Tomcat 2. 在POM.xml中添加Spring和CXF的依赖 <!-- 添加 Spring depe ...

  2. C#对象先序列化然后反序列化时间丢失八小时的问题

    把对象JSON序列化,然后反序列化后发现时间少了八小时.因为在东八区,所以序列的时候按照1970-01-01:08:00:00为基数取得差值,而反序列化的时候以1970-01-01:00:00:00作 ...

  3. scenejs的一点Cameras小笔记

    视图模式: 一如官网所见,这个cameras 是控制的视口的东西. 他有如下4个模式 1.orbit模式 鼠标拖中物体,切换视口观察物体,鼠标滚轮变换, 放大缩小可视范围. 2.orbit/spin模 ...

  4. javascrit原生实现jquery的append()函数

    /** * javascrit原生实现jquery的append()函数 * @param parent * @param text */ function append(parent, text) ...

  5. c++拷贝构造和编译优化

    #include <iostream> using namespace std; class MyClass { public: MyClass(); MyClass(int i); My ...

  6. ssl访问的原理

    本文无图文对照解释,但力求通俗易懂.请读者边读边手绘各个流程,一便于理解.      总体交互流程如下      1. 客户端发起HTTPS请求 这个没什么好说的,就是用户在浏览器里输入一个https ...

  7. linux c/c++

    string 字符串操作 操作数的都是 ( char * )型,操作数必须是指向字符串的指针("a"),不能是字符('a'),操作时不考虑末尾的'\0'. size_t strle ...

  8. 利用html5、websocket和opencv实现人脸检测 (二)

    前一篇的代码在执行时,java.exe占用内存会快速上涨: 在4G内存电脑上,单个连接,会持续上涨到2G多,然后减到1G多,如此循环. 经过一些删减定位,可以确定问题由public byte[] pr ...

  9. 用代码控制鼠标键盘(C#语言)

    前些时间想做一个鼠标点击器,用到了这些知识. 下面整理记录一下. ps.感谢各位大神 下面直接上代码 1.鼠标的控制 class MouseMove { #region MouseEvent [Sys ...

  10. C 标准库系列之assert.h

    先简单介绍一下<assert.h>头文件,该头文件的目的便是提供一个宏assert的定义,即可以在程序必要的地方使用其进行断言处理:断言在程序中的作用是当在调试模式下时,若程序给出的前提条 ...