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

### 本週自學清單
1. 複習flexbox layout
2. 複習react native 概念
3. 觀看APP Design Example
4. 寫期末Project

### 上課內容程式碼
期末Project
App.js 切換頁面使用
* 使用插件
* React-navigation - 下方換頁
* Ionicon - Icon 插件
* 程式碼
* 

home.js 首頁畫面
* 使用插件
* React-Native-Elements
* Button 按鈕
* SocialIcon 社交網站按鈕
* 程式碼
* 
* APP畫面
* 

trip.js 課程頁面
* 使用插件
* FlatList、Image等預設插件
* RN Elements 的搜尋欄插件
* 資料格式 :
* https://jsoneditoronline.org/#left=local.zemoju&right=local.bizoqa

* 程式碼
* 
* 

* APP畫面
* 
* 

gift.js 文章頁面
* 使用插件
* 使用插件
* RN Elements
* <Card> 樣式
* 本頁面資料為自行撰寫

* 程式碼 (部分，篇幅問題僅列出部分程式碼，實際<Card>標籤共有五個)
* 
* 
* 

* APP畫面
* 
* 

### 學習筆記
## **flexbox 常用寫法**
* ``` display : flex | inline-flex; ``` : 宣告為flex屬性
* ``` flex-direction: row | row-reverse | column | column-reverse; ``` : 改變軸線方向，一般Web預設為row，**但react-native預設為column**
* ``` flex-wrap: nowrap | wrap | wrap-reverse; ```: 是否換行
* ``` justify-content: flex-start | flex-end | center | space-between | space-around; ``` : 設定主軸對齊方式
* ``` align-items: flex-start | flex-end | center | baseline | stretch; ``` : 設定交錯軸對齊方式
## **react native 常用 Component**
* style寫法
* ``` <Text style={styles.welcome}><Text> ``` : 在styles內設定一個welcome style，再透過welcome改變Text的style
* ``` <Text style={{color:red,fontSize:20}}><Text> ``` : 直接操作text樣式
* ``` <Text style={[ styles.welcome, { color: 'red' } ]}><Text> ``` : 兩者合併使用
* Image 寫法
* ``` <Image source={require('./assets/cat1.jpg')} ``` : 使用本地端檔案
* 使用線上連結
* ```
<Image
style={[styles.center, { width: 400 }]}
source={{ uri: 'http://lorempixel.com/1920/1920/cats' }}
/>

    * 在使用本地檔案的時候，沒有設定圖片寬高，但是在使用 uri 的方式卻要使用(雷點!)
* TouchableOpacity : 點擊後變為透明元件，可用來做按鈕且可設定onPress事件

### 本周心得
這個學期終於結束了，也完成了自己的期末Project。對於未來目標是前端工程師的我，這堂課真的幫助我很多。原本三大框架只略懂vue的我，現在在三大框架上都略有涉獵了，未來如果要在企業用到相信學習速度能夠更快。在資料處理、資料庫等方面較不擅長的我，會再花時間在這個領域上，希望有一天能朝著全端工程師邁進。最後，感謝老師這學期的教學，對我我來說真的是獲益匪淺。