Merge pull request #8 from kyoyadmoon/master

update 201909 docs

Author: smlsunxie

SUMMARY.201909.md

@@ -27,8 +27,8 @@
 - [專案環境設置](setup/readme.md)
   - [一般環境設定](setup/environment.md)
   - [虛擬機環境教學](setup/VM_Setup.md)
-  - [ESLint](setup/eslint.md)
   - [初始化專案](setup/initialize_project.md)
+  - [ESLint](setup/eslint.md)
   - [git 常用操作指令](setup/git.md)
 - [網路與 HTTP Request](Network/readme.md)
   - [網路環境設定](Network/setup.md)

SUMMARY.md

@@ -4,55 +4,48 @@
   - [1. React.JS 介紹](react/React_Intro.md)
   - [2. 關鍵的 Virtual DOM](react/Virtual_DOM.md)
   - [3. 資料與畫面的更新流程](react/React_Data_Flow.md)
+- [React 教學](react/readme_2.md)
+  - [1. Expo Snack 介紹](setup/expo-snack.md)
+  - [2. React Component - 樂高式的 UI 組合](react/Component.md)
+  - [3. 好直覺的 JSX 語法糖](react/JSX.md)
+  - [4. Props - 傳遞資料的媒介](react/Props.md)
+  - [5. State - 動態更新的資料載體](react/State.md)
+  - [6. Lifecycle - Component 的一生](react/Lifecycle.md)
+- [React Native 組件練習教學](components/readme.md)
+  - [組件使用教學 - View](components/index.md)
+  - [Image](layout/image.md)
+  - [Button](layout/button.md)
+  - [Input 組件的資料流管理](components/Input_Data_Flow.md)
+  - [List](layout/list.md)
+  - [實戰練習 ToDo List](ToDoList/index.md)
+- [樣式與排版設計](layout/readme.md)
+  - [React Native Style](layout/style.md)
+  - [View 樣式](layout/view.md)
+  - [Flex](layout/flex.md)
+  - [Text](layout/text.md)
+  - [ToDo List Style 練習](ToDoList/add-style.md)
 - [專案環境設置](setup/readme.md)
   - [一般環境設定](setup/environment.md)
   - [虛擬機環境教學](setup/VM_Setup.md)
-  - [ESLint](setup/eslint.md)
   - [初始化專案](setup/initialize_project.md)
+  - [ESLint](setup/eslint.md)
+  - [git 常用操作指令](setup/git.md)
 - [網路與 HTTP Request](Network/readme.md)
-  - [1. 網路環境設定](Network/setup.md)
-  - [2. fetch HTTP request](Network/fetch.md)
-  - [3. Lab: ToDoList RESTful API 練習](ToDoList/restful-api.md)
-- [使用者認證整合](Auth/readme.md)
-  - [1. JWT](Auth/JWT/JWT.md)
-  - [2. Lab: ToDoList JWT 練習](ToDoList/jwt-todo.md)
-  - [3. Facebook 登入整合](Auth/SocialLogin/Facebook.md)
-  - [4. Lab: Facebook Login 練習](Auth/SocialLogin/todo-fbsdk.md)
-- [Redux](Redux-advance/readme.md)
-  - [1. Redux 介紹](Redux-advance/01-article-Redux介紹/readme.md)
-  - [2. 為什麼需要 Redux](Redux-advance/02-article-為什麼需要Redux/readme.md)
-  - [3. 三大原則](Redux-advance/03-article-三大原則/readme.md)
-  - [4. Redux 組成與資料流](Redux-advance/04-article-組成與資料流/readme.md)
-  - [5. React 專案整合 Redux](Redux-advance/05-article-整合Redux/readme.md)
-  - [6. Lab: ToDoList 整合 Redux 練習](Redux-advance/06-lab-ToDoList練習整合Redux/readme.md)
-- [手機元件操作](手機元件操作-advance/readme.md)
-  - [1. 位置資訊](手機元件操作-advance/01-article-Geolocation/readme.md)
-  - [2. 位置資訊練習](手機元件操作-advance/02-lab-Geolocation/readme.md)
-  - [3. 相機相簿權限](手機元件操作-advance/03-article-Camera/readme.md)
-  - [4. Lab: ToDoList 相機相簿練習](手機元件操作-advance/04-lab-Camera/readme.md)
-- [動畫及手勢操作](動畫及手勢操作-advance/readme.md)
-  - [1. 動畫介紹](動畫及手勢操作-advance/01-article-動畫介紹/readme.md)
-  - [2. 動畫元件](動畫及手勢操作-advance/02-article-動畫元件/readme.md)
-  - [3. 動畫樣式](動畫及手勢操作-advance/03-article-動畫樣式/readme.md)
-  - [4. 動畫函數](動畫及手勢操作-advance/04-article-動畫函數/readme.md)
-  - [5. 組合動畫](動畫及手勢操作-advance/05-article-組合動畫/readme.md)
-  - [6. 手勢事件](動畫及手勢操作-advance/06-article-手勢事件/readme.md)
-  - [7. 更新動畫值](動畫及手勢操作-advance/07-article-更新動畫值/readme.md)
-  - [8. Lab: 滑動動畫練習](動畫及手勢操作-advance/08-lab-滑動動畫練習/readme.md)
-- [推播通知](推播訊息-advance/readme.md)
-  - [1. 推播介紹](推播訊息-advance/01-article-推播介紹/readme.md)
-  - [2. firebase 設定](推播訊息-advance/02-article-firebase設定/readme.md)
-  - [3. iOS 套件整合](推播訊息-advance/03-article-iOS套件整合/readme.md)
-  - [4. Android 套件整合](推播訊息-advance/04-article-Android套件整合/readme.md)
-  - [5. 接收推播](推播訊息-advance/05-article-接收推播/readme.md)
-  - [6. Lab: 接收推播練習](推播訊息-advance/06-lab-接收推播練習/readme.md)
-- [多媒體操作](多媒體操作-advance/readme.md)
-  - [1. 音檔錄製](多媒體操作-advance/01-article-音檔錄製/readme.md)
-  - [2. 音檔播放](多媒體操作-advance/02-article-音檔播放/readme.md)
-  - [3. Lab: 音檔播放練習](多媒體操作-advance/03-lab-音檔播放練習/readme.md)
-  - [4. 影片檔錄製](多媒體操作-advance/04-article-影片檔錄製/readme.md)
-  - [5. 影片檔播放](多媒體操作-advance/05-article-影片檔播放/readme.md)
-  - [6. Lab: 影片錄製播放練習](多媒體操作-advance/06-lab-影片錄製播放練習/readme.md)
-- [熱部署 Hot Deploy](HotDeploy/readme.md)
-  - [1. CodePush 介紹](HotDeploy/CodePush.md)
-  - [2. Lab: 熱部署更新](HotDeploy/todolist-codepush.md)
+  - [網路環境設定](Network/setup.md)
+  - [fetch HTTP request](Network/fetch.md)
+  - [ToDo List RESTful API 練習](ToDoList/restful-api.md)
+- [第三方套件管理](third-party/index.md)
+  - [JavaScript 套件管理方式](third-party/js-module.md)
+  - [原生模組整合設定](third-party/native-module.md)
+  - [整合套件練習](ToDoList/add-icon.md)
+- [多畫面管理 Navigation](navigation/readme.md)
+  - [介紹管理套件 RNRF](navigation/index.md)
+  - [ToDoList 畫面管理練習](ToDoList/router.md)
+  - [Tab 使用方式](navigation/tabs.md)
+  - [Drawer 使用方式](navigation/drawer.md)
+- [儲存空間 AsyncStorage](async-storage/index.md)
+  - [AsyncStorage 介紹](async-storage/index.md)
+  - [ToDo List 使用 AsyncStorage 練習](ToDoList/async-storage.md)
+- [生成 App 安裝檔](release/readme.md)
+  - [打包 JS](release/index.md)
+  - [編譯專案產生 App 安裝檔](release/generate-app.md)

ToDoList/add-icon.md

@@ -1,5 +1,16 @@
 # 整合套件練習
 
+## 下載專案
+
+- ToDoList React Native Sample
+
+```bash
+cd ~/workspace
+git clone https://github.com/agileworks-tw/RN_Todo_Sample
+cd RN_Todo_Sample
+yarn
+```
+
 ## 練習目標
 
 > 切換到 `feature/todo-list-with-api-server` branch

ToDoList/restful-api.md

@@ -72,7 +72,7 @@ adb reverse tcp:3000 tcp:3000
 
 ### API 規格
 
-- get `/api/users/ReactNative/tasks`
+- get `/api/users/ReactNative/tasks`
 
 ```text
 method: 'get'

navigation/drawer.md

@@ -2,22 +2,21 @@
 
 ## Drawer (`<Drawer>` or `<Scene drawer>`)
 
-Can use all `prop` as listed in `Scene` as `<Drawer>`, syntatic sugar for `<Scene drawer={true}>`
-
 | Property           | Type              | Default | Description                                                                                                |
 | ------------------ | ----------------- | ------- | ---------------------------------------------------------------------------------------------------------- |
 | `drawerImage`      | `Image`           |         | Image to substitute drawer 'hamburger' icon, you have to set it together with `drawer` prop                |
 | `drawerIcon`       | `React.Component` |         | Arbitrary component to be used for drawer 'hamburger' icon, you have to set it together with `drawer` prop |
 | `hideDrawerButton` | `boolean`         | `false` | Boolean to show or not the drawerImage or drawerIcon                                                       |
 | `drawerPosition`   | `string`          | `left`  | Determines whether the drawer is on the right or the left. Keywords accepted are `right` and `left`        |
 | `drawerWidth`      | `number`          |         | The width, in pixels, of the drawer (optional)                                                             |
+| `contentComponent`     | `React.Component` |  | Component used to render the content of the drawer (e.g. navigation items). |
 
 ## 使用方法
 
 ```js
 import { Drawer, Scene } from 'react-native-router-flux';
 ...
-<Drawer>
+<Drawer drawerIcon={DrawerIcon} contentComponent={DrawerContent}>
   <Scene />
   <Scene />
   <Scene />

navigation/index.md

@@ -13,10 +13,6 @@
 $ yarn add react-native-router-flux
 ```
 
-## 範例專案
-
-[Example Project](https://github.com/agileworks-tw/RNRF-examples)
-
 ## Route 管理概念
 
 ### Router Stack
@@ -31,23 +27,23 @@ $ yarn add react-native-router-flux
 2.  定義 Router
     宣告 Scene 對應的 Component
 
-```javascript
-import { Router, Stack, Scene } from 'react-native-router-flux';
-/* render */
-<Router>
-  <Stack key="root">
-    <Scene key="login" component={Login} title="Login" />
-    <Scene key="register" component={Register} title="Register" />
-    <Scene key="home" component={Home} />
-  </Stack>
-</Router>;
-```
+  ```javascript
+  import { Router, Stack, Scene } from 'react-native-router-flux';
+  /* render */
+  <Router>
+    <Stack key="root">
+      <Scene key="login" component={Login} title="Login" />
+      <Scene key="register" component={Register} title="Register" />
+      <Scene key="home" component={Home} />
+    </Stack>
+  </Router>;
+  ```
 
 3.  使用 Actions 處理畫面跳轉
 
-```javascript
-Actions.sceneKey();
-```
+  ```javascript
+  Actions.sceneKey();
+  ```
 
 ### API
 
@@ -64,4 +60,5 @@ const paramData = {
   // place data here
 };
 Actions.anotherPage(paramData);
+Actions.anotherPage({ propName: 'propValue' });
 ```

navigation/tabs.md

@@ -2,7 +2,6 @@
 
 ## Tabs (`<Tabs>` or `<Scene tabs>`)
 
-Can use all `props` listed above in `<Scene>` as `<Tabs>` is syntatic sugar for `<Scene tabs={true}>`.
 
 | Property                  | Type              | Default | Description                                                                     |
 | ------------------------- | ----------------- | ------- | ------------------------------------------------------------------------------- |
@@ -26,7 +25,6 @@ Can use all `props` listed above in `<Scene>` as `<Tabs>` is syntatic sugar for
 
 ## Tab Scene (child `<Scene>` within `Tabs`)
 
-A `Scene` that is a direct child of `Tabs` and can use all `props` listed above in `Scene`,
 
 | Property      | Type        | Default     | Description                                     |
 | ------------- | ----------- | ----------- | ----------------------------------------------- |
@@ -39,8 +37,17 @@ A `Scene` that is a direct child of `Tabs` and can use all `props` listed above
 import { Tabs, Tab } from 'react-native-router-flux';
 ...
 <Tabs>
-  <Tab />
-  <Tab />
-  <Tab />
+  <Tab icon={TabIcon} title="tab1"/>
+  <Tab icon={TabIcon} title="tab2"/>
+  <Tab icon={TabIcon} title="tab3"/>
 </Tabs>
 ```
+
+`TabIcon`
+
+```js
+const TabIcon = props => 
+  <Text style={{ color: props.focused ? 'red' : 'black' }}>
+    {props.title}
+  </Text>;
+```

react/Lifecycle.md

@@ -27,7 +27,7 @@
 
 ```js
 class Example extends React.Component {
-  componentDidMount(prevProps, prevState) {
+  componentDidMount() {
     // ...
   }
 }
@@ -38,17 +38,20 @@ class Example extends React.Component {
 ## componentDidUpdate
 
 > 不能在沒有條件下進行 setState，否則會無窮迴圈
-> 一般會透過新舊比較 ( prevProps 與 this.props ) 或是 ( this.props 與 nextProps )，state 比較亦同
-> 再更新 state
+> 一般會透過新舊比較 ( prevProps 與 this.props ) 或是 ( this.props 與 nextProps )，state 比較異同，再更新 state
 
 ```js
 class Example extends React.Component {
-  componentDidUpdate(prevProps, prevState) {
-    // ...
+  componentDidUpdate(prevProps) {
+    // Typical usage (don't forget to compare props):
+    if (this.props.userID !== prevProps.userID) {
+      this.fetchData(this.props.userID);
+    }
   }
 }
 ```
 
+
 ## get­Derived­State­From­Props(nextProps, prevState)
 
 get­Derived­State­From­Props 主要是對比到原先的 componentWillReceiveProps，可以透過回傳一個 object 來更新 state，如果不更新就必須回傳 null。

release/generate-app.md

@@ -27,7 +27,7 @@ MYAPP_RELEASE_KEY_PASSWORD=*****
 
 ### 3. Adding signing config to your app's gradle config
 
-編輯 `android/app/build.gradle`
+編輯 `android/app/build.gradle`
 
 ```gradle
 ...

release/index.md

@@ -12,11 +12,49 @@
 ### iOS
 
 ```bash
-react-native bundle --entry-file index.ios.js --platform ios --dev false --bundle-output ios/main.jsbundle --assets-dest ios
+react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ios/main.jsbundle --assets-dest ios
 ```
 
 ### android
 
 ```bash
-react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
+react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
 ```
+
+## 打包問題
+
+### React Native 0.60 Android Duplicate resources Error occurred when generate release apk
+
+若有重新安裝 react-native 需要重做
+```js
+// file path: node_modules/react-native/react-gradle
+
+doFirst {
+  ...
+}
+/** Add doLast */
+doLast {
+    def moveFunc = { resSuffix ->
+        File originalDir = file("$buildDir/generated/res/react/release/drawable-${resSuffix}");
+        if (originalDir.exists()) {
+            File destDir = file("$buildDir/../src/main/res/drawable-${resSuffix}");
+            ant.move(file: originalDir, tofile: destDir);
+        }
+    }
+
+    moveFunc.curry("ldpi").call()
+    moveFunc.curry("mdpi").call()
+    moveFunc.curry("hdpi").call()
+    moveFunc.curry("xhdpi").call()
+    moveFunc.curry("xxhdpi").call()
+    moveFunc.curry("xxxhdpi").call()
+
+    File originalDir = file("$buildDir/generated/res/react/release/raw");
+        if (originalDir.exists()) {
+            File destDir = file("$buildDir/../src/main/res/raw");
+            ant.move(file: originalDir, tofile: destDir);
+    }
+}
+```
+
+相關 issue 連結： [https://github.com/facebook/react-native/issues/22234](https://github.com/facebook/react-native/issues/22234)