摘要：
主要寫下剛學(xué)RN時的一點心得桥氏。學(xué)習(xí)一個新語言温峭，首先當(dāng)然看官方文檔了，這里就不說了字支。主要說下看完文檔之后該如何上手凤藏。
主要說兩個：
- 路由
- 頁面當(dāng)中主要的兩個組件FlatList、SectionList
react-native-router-flux
- router 下第一層如果是Scene,必須設(shè)置key='root',因為需要有一個容器來切換Scene堕伪，可以使用Stack包裝
- 默認(rèn)第一個Scene為默認(rèn)顯示，initial和init屬性是不一樣的
List應(yīng)該是項目中用的比較多的組件蹄梢，所以就研究了下RN下的兩個列表組件FlatList和SectionList
任何問題都是從需求中發(fā)現(xiàn)的，下面就從兩個簡單需求中解決FlatList和SectionList幾個常見問題
FlatList
需求：在區(qū)域A中顯示區(qū)域B的FlatList富俄，如果內(nèi)容少就居中顯示在區(qū)域A中，如果內(nèi)容多就再區(qū)域A中滾動顯示
Flatlist
FlatList內(nèi)容樣式問題
如果要設(shè)置FlatList內(nèi)容的樣式需要在contentContainerStyle中設(shè)置
設(shè)置FlatList高度問題
- FlatList等類似容器類的空間幕袱，默認(rèn)是有flex:1屬性的,再次設(shè)置flex是不起作用的悠瞬。
- FlatList contentContainerStyle不能設(shè)置flex:1和固定高度，否則不能滑動浅妆。
- 如果父容器flex-direction為column時想要設(shè)置FlatList高度必須在外層包裹一層View，設(shè)置View的高度
FlatList內(nèi)容少時凌外，居中問題
需要在FlatList外再包一層View包裹FlatList高度，因為flex是0对省，所以View的高度是FlatList的內(nèi)容高度
FlatList寬度占滿屏幕問題
想要設(shè)置寬度需要設(shè)置View的alighSelf為stretch晾捏。水平情況也是同樣的道理
SectionList
需求：實現(xiàn)類似微信錢包這種帶標(biāo)題的橫向列表哀托，默認(rèn)SectionList不支持，這里介紹三種方式
SectionList
方案一：（缺點：有警告 flex-wrap is not support with the virtualizedlist. 目前github issues未解決）
- 設(shè)置contenContainerStyle flex-direction: row flex-wrap: wrap
- 設(shè)置sectionHeader寬度為屏幕寬度
- 如需子元素等寬胖齐，設(shè)置子元素寬度
方案二：
- renderItem void
- renderSectionHeader 用FlatList，設(shè)置FlatList header numColumns
方案三：
- 更改數(shù)據(jù)源补履，item數(shù)據(jù)為List
- renderItem 用FlatList，設(shè)置FlatList header numColumns
