React Native學習路徑

原文：

Learning Path React Native

基礎

1. 如何初始化React Native(https://facebook.github.io/react-native/docs/getting-started.html)
2. 於iOS或Android模擬器、iPhone或Android實體裝置進行測試、使用模擬器的Debug模式
3. 如何升級React Native project (https://github.com/ncuillery/rn-diff)
4. 添加package到project (yarn add react-native-…)
5. 添加擁有native dependency的package(for instance, https://github.com/airbnb/react-native-maps, https://github.com/evollu/react-native-fcm) — avoid cocoapods
6. 學習如何使用fetch 從後端抓取資料

學習導航列

1. React Navigation — https://github.com/react-community/react-navigation
2. Tab bar 導航列 (Sliding Tab 導航列)
3. Drawer 導航列 (drawer menu)
4. Alert bar
5. 建立一個擁有drawer + tab navigation的boilerplate

6. 底部導航列(Bottom tab navigation for IOS) and 頂部導航列(Top Sliding Tab navigation for Android)

學習登入/登入流程

1. 登入APP前，至少要有3個畫面(Screen)(launch, login, register) — https://itunes.apple.com/us/app/brand-lovers-beleza-e-maquiagem/id1094374278?mt=8
2. 在登入或註冊後，至少要有一個畫面(Screen)
3. 用redux完成該功能
4. 不用redux完成該功能

學習常用的Mobile設計模式

1. 使用https://github.com/gcanti/tcomb-form-native 設計表格
2. 不用tcomb-form-native設計出同樣的表格
3. 學習ListView, 列出一些有/沒有sections的item
4. 使用來自 React Native core的<Modal /> 元件component
5. 改變導行列轉場風格
6. 學習社群媒體登入功能(facebook, google, twitter...)
7. 使用動畫效果 https://egghead.io/courses/animate-react-native-ui-elements; http://browniefed.com/react-native-animation-book/
8. 實現推送通知(push notification)
9. 學習使用camera roll功能(存取手機中的照片或影片媒體)
10. 學習使用地圖功能
11. 學習Graph QL(Relay/Apollo)

檢核表