React Native 新手村 : 如何執行專案

Published on:


作為 React-Native 世界的新手冒險者,離開新手村的第一個考驗大概就是如何啟動整個專案了。

作為簡介,讀者可以參考 iThome 的 臉書用Javascript快速打造高效原生手機App的利器React Native釋出

本文將使用 rndrawer-implemented-rnrouter 這一個專案作為範例。這是一個結合了 react-native-drawer and react-native-router-flux 的好東西,有了它,你就能學會怎麼做出一個有 sidebar/drawer 的 react-native app。

環境建置

執行專案之前,需要先有 XCode/Android Studio,同時也要安裝一些基本套件:

  • 如果你的 npm version < 3,且有需要 npm@2 與 npm@3 共存

    npm install -g npm3
    
  • 如果你的 npm version < 3,且不需要 npm@2 與 npm@3 共存

    npm install -g npm@3
    
  • install rnpm for linking react-native modules., e.g. like "Linking" which is open specific app by a URL-link.

    npm install -g rnpm
    
  • install cocoapods just in case - for link modules automatically. it needs a pre-scripted podfile.

    sudo gem install cocoapods 
    

每個專案目錄結構會有稍有不同,不過應該都大同小異。以這個範例來說,其下的 src 資料夾是程式原始碼所在,而 iosandroid 則是專案產生對應該平台的 IDE 專案目錄;而執行方式也非常簡單:

  • after clone a project, cd to project's root and do installation.

    cd /[project] && npm install
    
  • if project's readme mention it contains pods.

    pod install
    
  • if you or the project use any react-native module.

    rnpm link 
    

如果到這邊都沒有任何錯誤發生,恭喜你!你差不多可以回村找長老交任務了!

For iOS platform

  • assume you are in project's root, type those to open xcodeproj file.

    open ios/reactNativeRouterFluxSample.xcodeproj
    

接下來會立刻開啟 XCode,由於這個專案參照了其它套件,所以你需要如圖選擇正確的 SCHEME。一般來說,都跟專案名稱有關。

確認之後直接點選執行就可以了。

iphone 模擬器與 react-native package manager 會自動執行,到此基本上就成功了。

哎呀放錯圖了。成功了好爽啊超爽的!

For Android platform

  • 開啟 Android Studio 並且選擇 Android 目錄。

未完待續

refs

Comments

comments powered by Disqus