Web | Coding | Blog | SOHO

[React 隨筆]React Native – 建立專案 Hello World

根據傳統,也來寫一個 Hello World 吧~
那在進入程式碼的部分之前,是必須先建立專案的。

提醒:在進行 Hello World 之前,請確定自己的平台環境已經建置好唷!
可參考 [REACT 隨筆]REACT NATIVE 環境建置
♣ 本篇使用的平台為 macOS Sierra (10.12.2)


♥ 首先:透過終端機來建立專案

開啟終端機並貼上這串命令:

react-native init HelloWorld

執行該命令後,會先提示你該專案存放的路徑位置。類似如下:

This will walk you through creating a new React Native project in /路徑名稱 /路徑名稱/HelloWorld

那麼當建立好專案會如下圖所示:

在終端機提示著,可以透過 react-native run-iosreact-native run android 命令來開啟模擬器執行該app;本篇示範為 iOS。
若您要執行 Android 請自行安裝模擬器唷~

♥ 2:執行 HelloWorld 專案

有兩種方式可以執行,但是不管哪一種方式,都必須知道自己的專案放置在哪裡,
因為必須編輯專案內的 index.ios.js 檔案。

  • (方法一)執行透過終端機命令來執行:
    由於建立完專案還在外層資料夾,因此我們必須先進入專案資料夾才可以透過 react-native run-ios 來運行模擬器執行 app。進入資料夾的命令為
    (剛剛建立的專案為 HelloWorld,因此資料夾名稱為HelloWorld,
    請注意大小寫)

    cd HelloWorld

    確定已經進入該專案資料夾底下後,執行命令

    react-native run-ios

    此時會提示:找到 Xcdoe 專案(下圖左上終端機),在這之後會再自動開啟第二個終端機(下圖左下終端機)以及iOS模擬器(下圖右),

    當模擬器開機完成,且順利安裝好 HelloWorld app 後,會進入歡迎畫面。
    在這畫面也提供了重要的指示,如 Cmd+R 為 重整app畫面。

    如果想要在實機 iPhone 上運行的話,還必須多幾樣步驟,
    請參考[React 隨筆]專案 app iPhone 實機測試

     

  • (方法二)直接透過Xcode 開啟
    直接開啟 Finder 找到專案資料夾並進入,
    找到 ios 資料夾後進入直接透過Xcode 執行 HelloWorld.xcodeproj 專案檔。

    上圖為 HelloWorld 專案資料夾
    上圖為 HelloWorld 資料夾底下的 ios 資料夾

    進到 Xcode 後,找到左上方 三角形播放鈕,即可運行模擬器執行該專案。

    如果想要在實機 iPhone 上運行的話,還必須多幾樣步驟,
    請參考[React 隨筆]專案 app iPhone 實機測試

以上就完成建立專案與模擬器執行app囉!


最後提醒:每次想建立新專案,在終端機輸入的命令,
xxxxxx 部分為自己定義的專案名稱。

react-native init xxxxxx

如本次為建立 HelloWorld 專案,因此 xxxxxx 部分就是HelloWorld

react-native init HelloWorld

同時 也是專案資料夾的資料夾名稱。



React 隨筆系列 (點此閱讀所有 React 隨筆系列)
有任何問題也歡迎在底下留言,或到fb粉絲專頁發訊息給站長一起討論。


如果您喜歡本站的文章,也歡迎將文章分享轉貼並註明出處;
另外還未按讚粉絲專頁的朋友,也可以動動手點擊追蹤最新的文章唷:

Comments

comments

如果您喜歡本站的文章,也歡迎將文章分享轉貼並註明出處;另外還未按讚粉絲專頁的朋友,也可以動動手點擊追蹤最新的文章唷:


© 2017 4xCode™ | Design:SC 站長