1.學習地址##
1.官網地址:https://facebook.github.io/react-native/docs/getting-started.html#content
2.中文版官方文檔:http://wiki.jikexueyuan.com/project/react-native/tutorial.html
3.推薦開發(fā)編輯器: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
