# Web 企業運算 - Week 13 ( 6/9 - 6/16 )
數科碩一 M0861101 許家維

### 本週自學清單
* React-Native實作練習 - 根據期末規定粗略切版
* Flexbox 複習
* React-Native Component
* https://reactnative.dev/docs/components-and-apis.html
* 本文網址 : https://hackmd.io/5RsmJwKfTMqWQmY5NTKo4A?both

### 上課內容程式碼
App.js 程式
Explore.js 程式
Explore 手機畫面
Saved.js 程式 (實作上課內容)
Save 手機畫面

### 學習筆記
* React Native是一個行動應用程式開發框架，使用React.js構建行動應用程式。我們能夠使用Javascript建立原生ios及Android框架
* 使用React Native的範例如Facebook、Skype、Instagram
* 特點 : **Virtual DOM !!!**
* React Native 在Javascript中抽象操作系統原生的UI組件高效機制，判斷新舊狀態，即可知道是哪個DOM發生變化，有更動才會進行渲染，不用每次重繪內容，通過不同的渲染引擎生成不同平台下的UI
* Expo Client
* Expo Client（Android / iOS / Github） 主要負責即時接收由 XDE or 透過 Expo Cli 所部署（deploy）來的程式碼。
* Expo 框架本身會把你撰寫的樣式、功能等打包成某種格式，透過 Wifi 或是雲端傳送到Expo Client 上，再由它轉譯成你想呈現的東西。
* 

React Native 安裝步驟
1. ``` npm install -g expo-cli ``` : 安裝Expo cilent
2. ``` expo init 專案名稱 ``` : 初始化專案在XX資料夾
3. ``` cd 專案名稱 ```
4. ```npm start (expo start) ``` : 開啟 Expo Server & Metro bundler

Component 安裝步驟
1. 擁有一個React-Native環境
2. ``` npm install Component名稱 ``` : 安裝套件
3. ```npm install``` : 安裝該套件的dependencies

常用Component
* View
* View 是 React Native 中最基礎的 Component，如同 React DOM 裡面的 div 一樣重要，可以把它拿來做排版上的設定、處理 Touch 的 Event 等等。
* 會對應到 iOS 上的 UIView、以及在 Android 的 android.view。
* Text
* 用來呈現一段文字的 Component
* Image : 放圖片
* Touchables*
* React Native 內建許多能處理 Touch 的 Component (統稱 Touchables*)，它們都能指定 onPress、onPressIn、onPressOut、onLongPress 等等的 Event Handler，而它們之間的差別在於它們被 Touch 之後會有不同的回饋
* Button
* 在v0.37.0 才導入的新 Component
* ScrollView
* 內容超出一個畫面所能顯示的量時，我們通常需要使用 ScrollView，讓它能藉由往下滑來瀏覽
* ListView
* 通常被用在呈現大量陣列資料時使用，不會一次 Render 所有的 Item，只會 Render 呈現在畫面上的 Item，可以改善單純使用 ScrollView 的效能問題。
* 需要傳遞一個 Function 給 renderRow，讓 ListView 知道怎麼去 Render 每一列

### 本周心得
這個禮拜上了業界使用率高的React Native，透過RN能快速開發APP。自己認為學RN一開始可能會遇到一點困難，因為每個小功能可能都需要下載及import一個Components，比起單純寫網頁多了一道程序。但他的即時顯示在手機上也讓我非常驚豔。未來我應該會深入研究此一框架，讓自己不僅僅只是開發web介面，也能透過RN開發APP介面。
這次的練習我挑戰先做一部分的期末作業，試試看能不能靠自己刻出來，目前已經完成Search Bar及 下方三個頁面的切換，在資料方面先粗略的科Layout，再下一周會試著把資料接上，實現完整的一個APP