---
# System prepended metadata

title: Web 企業運算 - Week 14 ( 6/16 - 6/23 )

---

# 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 插件
* 程式碼
* ![](https://i.imgur.com/qoDElrd.png)

home.js 首頁畫面
* 使用插件
    * React-Native-Elements
        * Button 按鈕
        * SocialIcon 社交網站按鈕
* 程式碼
* ![](https://i.imgur.com/oXzrh2Z.png)
* APP畫面
* ![](https://i.imgur.com/hzWGja8.png)

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

* 程式碼
* ![](https://i.imgur.com/iL8fzaW.png)
* ![](https://i.imgur.com/J9pYcMa.png)

* APP畫面
* ![](https://i.imgur.com/nzKFNkY.png)
* ![](https://i.imgur.com/iTPcAP9.png)


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

* 程式碼 (部分，篇幅問題僅列出部分程式碼，實際<Card>標籤共有五個)
* ![](https://i.imgur.com/Wwswpal.png)
* ![](https://i.imgur.com/D1HRbWe.png)
* ![](https://i.imgur.com/lnKKA6s.png)

* APP畫面
* ![](https://i.imgur.com/k7Ryixo.png)
* ![](https://i.imgur.com/XEiq5BB.png)







### 學習筆記
## **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的我，現在在三大框架上都略有涉獵了，未來如果要在企業用到相信學習速度能夠更快。在資料處理、資料庫等方面較不擅長的我，會再花時間在這個領域上，希望有一天能朝著全端工程師邁進。最後，感謝老師這學期的教學，對我我來說真的是獲益匪淺。
