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)

檢核表

Written by

Machine Learning / Deep Learning / Python / Flutter cakeresume.com/yanwei-liu

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store