iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 1
0
很抱歉最近實在太忙了,以至於一直沒辦法把前文好好寫完,現在先為大家預覽一下 Day3 的內容!

Exponent:上手與執行

q
第一篇指南的首要目標是盡快地建立並執行第一個 Exponent 應用程式。
在這個階段,我們應該要有一個已經安裝好 XDE 的環境,以及一組安裝有 Exponent 客戶端 app 的 iOS / Android 實體機或是虛擬機 / 模擬器。

建立帳號

初次執行 XDE 之後,你會看到一個詢問使用者名稱及密碼的提示。不要猶疑,請填上任何你想要的使用者名稱/密碼,然後按下繼續 — 如果該使用者名稱沒有重複,我們會自動為你建立該帳號。

建立專案

按下 Project 並且選擇 New Project,然後選擇 Tab Navigation 選項 — 這個樣板帶給我們一個好的開始 — 然後輸入你想要的專案名稱,以我來說,這將會是 my-new-project

接下來,決定你的專案要存在哪裡。我個人會把所有我的酷玩意兒通通放在 /coding,所以我選擇該路徑,並且按下打開。

XDE 現在會在你所選取的目錄初始化一個新專案,包含:一份複製過來的基本樣板,以及安裝 reactreact-nativeexponent

當專案初始化準備好之後,你會看到 XDE 的 Logs 視窗出現 React packager ready. 字句。這個 React packager 是一個簡單 HTTP Server,它使用 Babel <https://babeljs.io/>_ 替你編譯 app 所需要的 Javascript 程式碼,並且提供給你的 Exponent app 使用。

**NOTE**:如果你是 MacOS 的使用者,而且你的 XDE 卡在 “Waiting for packager and tunnel to start”,那你可能需要安裝 [install watchman on your machine] (https://facebook.github.io/watchman/docs/install.html#build-install)。最簡單的安裝方式是透過 `[Homebrew](http://brew.sh/)`,執行這段指令:``brew install watchman``。
**NOTE2**:如果你先前就已經裝過 watchman < 4.6.0,那請使用這段指令更新:``brew uninstall watchman; brew install watchman``。

在你的手機或是模擬器上開啟 app

你會在 XDE 上看到類似 exp://jv-8wr.iamcxa.my-new-project.exp.direct:80 般的網址,請把 exp 換成 http 後直接使用瀏覽器開啟它。
你將會看到一些 JSON 格式的內容。這個 JSON 就是 Exponent Manifest,它讓我們可以透過開啟 Exponent app 並且在 address bar 貼上該網址來開啟自己的 app。

或是試試另外一個很狂的方式:點選 Send Link,輸入你的手機號碼(包含國碼如 +886912345678)或 Email,然後再次按下 Send Link
隨後點擊收到的簡訊中的連結,你的 app 就會透過 Exponent app 開啟。你可以分享這個連結給任何已經安裝 Exponent app 的朋友使用 — 但要注意的是,它將只在你的 XDE 正在執行中且有開啟對應專案時有效。
要在 iOS 模擬器中開啟 app,你可以點擊 Device 按鈕,然後選取 Open on iOS Simulator(macOS 限定)。要在 Android 模擬器中開啟 app,你需要先啟動模擬器,再按下 Open on Android

作出你自己的變更

在你的專案中開啟 screens/HomeScreen.js,然後修改 render() 函式中的任何文字字串。你應該會在你的 app 重新載入後看到你所做的變更。

沒有變化嗎?

預設 Live reload 就是啟用的,但我們還是來看一次如何啟用的步驟吧!有時候事情就是不會隨著你所希望的那樣運作。
首先,確保 XDE 的 development-mode 已經啟用。
關閉 app 然後重新開啟。
當 app ㄧ經重啟,搖動你的裝置以開啟 Developer Menu。如果你用的是模擬器,iOS 請按下 ⌘+d、Android 請按 Ctrl+M
如果你看到 Enable Live Reload,你的 app 會在你按下它後隨即重啟。如果,你看到的是 Disable Live Reload,那麼請離開 Developer Menu 然後試著做出其他變更。

恭喜!

終於,你已經完成建立一個新的 Exponent 專案,同時做出程式碼變動、而且看見你的 app 動態更新。恭喜你!

目錄

  • Day1 / Introduction App 開發的新世界
  • Day2 / React Native 的大冒險
  • Day3 / Exponent 上手與執行

下一篇
Day2 / React Native 的大冒險
系列文
APP 開發的新世界2
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言