01.React-Native-FlexBox布局

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