React Native 跨平台APP開發課程 2/2
之前對Redux掌握度大概只有10%，現在感覺有到40~50％。
A.Redux：
- 資料流：View透過ActionCreator向Action提交一個申請書，告訴Action需要更改資料 -> Action就是那份申請書 -> Reducer接收到申請書後，做實際的資料更新動作 -> Reducer將新資料給Store -> Store因為資料更新，而反映給View。
- Reducer的命名是針對Store中某個屬性（某份data）做命名。e.g. function todos() {}的命名對應至Store = {todos: [{...}, {...}]};
- Redux是種概念，不一定要搭配React.js，也可搭配Vue.js或Augular。
- Redux就像前端的資料庫，連結React和Redux的資料庫連線就是Provider、connect()。
- 設計元件時，盡量分成：作為資料更改、維護的Smart Component與只做資料輸出的Dumb Component。其中盡量設計成Dumb Component，因此種元件能跨案子使用。
- 語法：
當檔案寫成：export default {a, b, c}，則在其他檔案載入時需寫成：import temp from '模組檔案路徑'。
當檔案寫成：export a; export b; export c;，則在其他檔案載入時需寫成：import {a, b, c} from '模組檔案路徑'。
當檔案寫成：export a; export b; export c; export default d;，則在其他檔案載入時需寫成：import d, {a, b, c} from '模組檔案路徑'。
B.React Native：
- <Image style={{width: 50, height: 50}} source={{uri: 'data:image/png;base64....'}}> => 當圖片元件指定source後，預設是無寬高的，所以要用style給寬高，免得一直覺得圖片未顯示成功。
- 當使用for loop去呈現一組資料時，加入keyExtractor。keyExtractor是取某一資料做為key，以辨別每個元件，增加render效能。
這次滿難過推播實作沒能成功，不知是不是VM環境或是連線原因。然後之後實作音檔錄製播放時，發現Genymotion好像不支援麥克風，也沒能成功，心情有點悶。
C.推播實作流程：firebase能整合iOS與Android的推播機制，因而先在firebase建新專案 -> 為ReactNative和firebase核心做綁定整合設定 -> 因為要實作推播，所以為ReactNative綁定firebase一些服務，為Messaging Module與Notification Module，一樣做一堆設定整合 -> 開始為推播寫code，處理message權限並做開通知的監聽事件。
A.Redux：
- 資料流：View透過ActionCreator向Action提交一個申請書，告訴Action需要更改資料 -> Action就是那份申請書 -> Reducer接收到申請書後，做實際的資料更新動作 -> Reducer將新資料給Store -> Store因為資料更新，而反映給View。
- Reducer的命名是針對Store中某個屬性（某份data）做命名。e.g. function todos() {}的命名對應至Store = {todos: [{...}, {...}]};
- Redux是種概念，不一定要搭配React.js，也可搭配Vue.js或Augular。
- Redux就像前端的資料庫，連結React和Redux的資料庫連線就是Provider、connect()。
- 設計元件時，盡量分成：作為資料更改、維護的Smart Component與只做資料輸出的Dumb Component。其中盡量設計成Dumb Component，因此種元件能跨案子使用。
- 語法：
當檔案寫成：export default {a, b, c}，則在其他檔案載入時需寫成：import temp from '模組檔案路徑'。
當檔案寫成：export a; export b; export c;，則在其他檔案載入時需寫成：import {a, b, c} from '模組檔案路徑'。
當檔案寫成：export a; export b; export c; export default d;，則在其他檔案載入時需寫成：import d, {a, b, c} from '模組檔案路徑'。
B.React Native：
- <Image style={{width: 50, height: 50}} source={{uri: 'data:image/png;base64....'}}> => 當圖片元件指定source後，預設是無寬高的，所以要用style給寬高，免得一直覺得圖片未顯示成功。
- 當使用for loop去呈現一組資料時，加入keyExtractor。keyExtractor是取某一資料做為key，以辨別每個元件，增加render效能。
這次滿難過推播實作沒能成功，不知是不是VM環境或是連線原因。然後之後實作音檔錄製播放時，發現Genymotion好像不支援麥克風，也沒能成功，心情有點悶。
C.推播實作流程：firebase能整合iOS與Android的推播機制，因而先在firebase建新專案 -> 為ReactNative和firebase核心做綁定整合設定 -> 因為要實作推播，所以為ReactNative綁定firebase一些服務，為Messaging Module與Notification Module，一樣做一堆設定整合 -> 開始為推播寫code，處理message權限並做開通知的監聽事件。
留言
張貼留言