import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native'; export default class AlignItemsBasics extends Component {
render() {
return (
// 尝试把`alignItems`改为`flex-start`看看
// 尝试把`justifyContent`改为`flex-end`看看
// 尝试把`flexDirection`改为`row`看看
<View style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'stretch',
}}>
<View style={{
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
}}>
<View style={{width: 50, height: 50, backgroundColor: 'red'}} />
<View style={{width: 50,height: 50, backgroundColor: 'blue'}} />
<View style={{width: 50,height: 100, backgroundColor: 'black'}} />
</View>
</View>
);
}
};

一个横向排列,一个竖向排列,子视图居中 https://reactnative.cn/docs/flexbox/

alignItems子视图对齐方式,例如:视图内容横向排列,则是标识竖向对齐方式

同一子视图的flex都设定值的话,子视图的宽高大小将按照此比例分配,不说明宽高情况下为auto自适应宽高

https://blog.csdn.net/u011468619/article/details/72781959  创建页面并绑定跳转

https://reactnative.cn/docs/using-a-listview/ 列表的书写FlatList SectionList

https://reactnative.cn/docs/network/ Fetch进行同步或异步网络请求上传等操作

https://www.jianshu.com/p/4c81995746ea  导航跳转相关

ReactNative小笔记的更多相关文章

  1. react-native学习笔记--史上最详细Windows版本搭建安装React Native环境配置

    参考:http://www.lcode.org/react-native/ React native中文网:http://reactnative.cn/docs/0.23/android-setup. ...

  2. 转:【iOS开发每日小笔记(十一)】iOS8更新留下的“坑” NSAttributedString设置下划线 NSUnderlineStyleAttributeName 属性必须为NSNumber

    http://www.bubuko.com/infodetail-382485.html 标签:des   class   style   代码   html   使用   问题   文件   数据 ...

  3. 小笔记:Timer定时间隔时间操作

    小笔记:Timer定时间隔时间操作,后面有时间再补充和完善: public class TimingSvc { /// <summary> /// 定时器,执行定时任务 /// </ ...

  4. 关于 linux中TCP数据包(SKB)序列号的小笔记

    关于  SKB序列号的小笔记 为了修改TCP协议,现在遇到了要改动tcp分组的序列号,但是只是在tcp_sendmsg函数中找到了SKB的end_seq  一直没有找到seq 不清楚在那里初始化了,就 ...

  5. Linux下postgres9.4 版本的单机版安装小笔记

    1.添加RPMyum install https://download.postgresql.org/pub/repos/yum/9.4/redhat/rhel-7-x86_64/pgdg-redha ...

  6. 深入剖析Nginx一点小笔记

    前几天在图书馆看书,恰好看到这本<深入剖析nginx>,花了快一周的时间看完了这本书,写点笔记心得便于以后复习. 以前对nginx的认识就只是停留在一个反向代理服务器上.百度了一下ngin ...

  7. react-native学习笔记——简单尝试

    毫无疑问,我是个不善于写博文的人. 毫无疑问,react是个出的框架. 毫无疑问,react-native更是个牛逼的引擎. 我个人对react-native的理解就是js被js引擎编译,去调用本地语 ...

  8. ReactNative开发笔记(持续更新...)

    本文均为RN开发过程中遇到的问题.坑点的分析及解决方案,各问题点之间无关联,希望能帮助读者少走弯路,持续更新中... (2019年3月29日更新) 原文链接:http://www.kovli.com/ ...

  9. react-native学习笔记--首次安装apk到小米5报错

    本文直接引用大神文档: [WINDOWS环境 React Native初识]com.android.ddmlib.InstallException: Failed to establish sessi ...

随机推荐

  1. Atitit mybatis快速开发 的sql api接口

    Atitit mybatis快速开发 的sql api接口 1.1. sql模式 开发速度大大快与 映射模式1 1.2. MyBatis Mapper1 1.2.1. 代码2 1.2.2. 原理2 1 ...

  2. Java 汇编代码

    https://shipilev.net/blog/2015/black-magic-method-dispatch/ https://github.com/shipilev/article-meth ...

  3. [20170629]带过滤的复制项UI操作导致订阅全部初始化问题

    [问题] 带过滤的复制项UI操作导致订阅全部初始化,但是想不全部初始化,只初始化对应的复制项   [解决] 1.如果修改过滤项,可以直接执行,然后生成快照: -- Adding the article ...

  4. 如何取消Visual Studio Browser Link

    VS2013.2015新建MVC网站并浏览后,页面默认自动启用Browser Link功能 解决方法,只需要在web.config中添加配置节点即可 <appSettings> <a ...

  5. Selenium Web 自动化 - 项目实战(二)

    Selenium Web 自动化 - 项目实战(二) 2016-08-08 什么是数据驱动?简答的理解就是测试数据决定了测试结果,这就是所谓数据驱动.数据驱动包含了数据,他就是测试数据,在自动化领域里 ...

  6. sql1032n sql6048n db2start启动不了 db2修改hostname

    今天下午把虚拟机上的linux的hostanme改掉了 结果启动DB2的时候发生了这样的错误 SQL6048N  A communication error occurred during START ...

  7. 命名实体识别,使用pyltp提取文本中的地址

    首先安装pyltp pytlp项目首页 单例类(第一次调用时加载模型) class Singleton(object): def __new__(cls, *args, **kwargs): if n ...

  8. C#获取起始位置以及添加全局资源字典

    获取起始位置 Path.Combine(AppDomain.CurrentDomain.BaseDirectory); 添加全局资源 string temp = "this is a str ...

  9. django template if return false

    如果if的参数不存在于context中就会返回false 参考:http://stackoverflow.com/questions/11107028/django-template-if-true- ...

  10. Java知多少(6)第一个程序示例

    跟随世界潮流,第一个Java程序输出“Hell World!”. 通过Eclipse运行程序 启动Eclipse,在菜单中选择“文件 --> 新建 --> Java项目”,弹出对话框: 图 ...