1.学习地址##
1.官网地址:https://facebook.github.io/react-native/docs/getting-started.html#content
2.中文版官方文档:http://wiki.jikexueyuan.com/project/react-native/tutorial.html
3.推荐开发编辑器:atom或者是sublime Text2两者都可以直接百度可以下载到
2.FlexBox布局基本使用
1.FlexBox属性###
- 容器属性
flexDirection (横着还是竖着)
flexWrap (换行还是不换行)
alignItems
justifyContent
- 元素属性
flex
alignSelf
2.flexBox默认属性###
1. flexDirection默认是column
Paste_Image.png
2. flexWrap的默认属性是nowrap(一行)
Paste_Image.png
3.alignItems
Paste_Image.png
4.justifyContent
Paste_Image.png
5.flex
Paste_Image.png
6.alignSelf
Paste_Image.png
3.布局概念知识补充##
1.宽度单位
- 设置宽度或者高度时不用带单位,默认使用pt为单位
- 不能设置百分比来设置宽度或高度
- 可通过Dimensions模块来获取窗口高度
- 可通过PixelRatio模块来获取像素密度
Paste_Image.png
2.盒子模型图
Paste_Image.png
3.定位模式
- 支持absolute和relative定位
-
和css的标准不同的是,元素容器不用设置position: 'absolute|relative'
Paste_Image.png
Paste_Image.png
4.css属性支持
- transform
- border style
- font style
- shadow
- background
- overflow, opacity
Image的使用
Paste_Image.png
Paste_Image.png
Paste_Image.png
Paste_Image.png
mvc.png
