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. Docker 以 docker 方式运行 jenkins

    https://testerhome.com/topics/5798 Docker 以 docker 方式运行 jenkins jmcn · 2016年08月26日 · 最后由 blueshark 回 ...

  2. js 学习

    {% load static %} <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  3. Hexo NexT 博客与Github page 关联指南

    上篇文章 Hexo 博客框架NexT主题搭建指南 我们已经在本地搭建好了Hexo博客框架NexT 主题的博客程序,但是这感觉还是远远不够. 我们还想把它部署到我们的Github上,让其他人可以看到我们 ...

  4. rsync用于数据迁移/备份的几个细节

    上周我们的一个GitLab服务频繁出现web页面卡死问题,得重启虚拟机才可恢复,但重启之后没多久又会卡死.后来发现是虚拟机的磁盘大小超过了2T,而虚拟机管理那层的文件系统是ext3,最大单文件只能支持 ...

  5. 【iCore1S 双核心板_FPGA】例程十六:基于SPI的ARM与FPGA通信实验

    实验现象: 核心代码: int main(void) { int i,n; ]; ]; HAL_Init(); system_clock.initialize(); led.initialize(); ...

  6. 微信mac版的bug 直接显示了消息原始数据

    <msg> <voicemsg endflag="1" cancelflag="0" forwardflag="0" vo ...

  7. hdoj:2042

    #include <iostream> using namespace std; int main() { int n,a; while (cin >> n) { while ...

  8. hdoj:2034

    #include <iostream> #include <vector> #include<algorithm> //包含sort函数 using namespa ...

  9. 最全面的Spring-Boot-Cache使用与整合

    一:Spring缓存抽象 Spring从3.1开始定义了org.springframework.cache.Cache和org.springframework.cache.CacheManager接口 ...

  10. 完全卸载MySQL

    1.先停止mysql服务,cmd模式下输入net stop mysql; 或者在图形服务面板停止mysql服务 2.进入控制面板卸载mysql; 3.windows+R运行“regedit”文件,打开 ...