React Native iOS環境搭建

jopen 9年前發布 | 16K 次閱讀 IOS iOS開發 移動開發

感覺React Native會越來越多的公司開始研究、使用。所以周六也抽空搭建了iOS的開發環境,以便以后利用空閑的時間能夠學習一下。

廢話不多說了,下面簡單的列出步驟吧。 

  1. 安裝Homebrew 
    Homebrew主要用于安裝后面需要安裝的watchman、flow 
    打開MAC的終端,輸入如下命令: 

    ruby -e "$(curl -fsSL ; </p>

    經過漫長的等待后,安裝完成。執行 brew doctor 命令。這是homebrew 完成后必須做的一件事,檢查homebrew各模塊是否正常

    2. 安裝nvm和nodejs 
    nvm是用于nodejs版本管理的工具,用于安裝nodejs。 
    對于nvm應該可以使用brew直接安裝,但是我沒有用這個安裝,讀者可以自己使用如下命令試試: 

    brew install nvm 

    我使用的另一種方式,在終端中輸入如下的命令: 

    brew install node . 該命令執行后,自動裝好node和npm 

    這個用于安裝nodejs和npm。npm用于nodejs包依賴管理的工具。 

  2. 安裝watchman 
    watchman是用于監聽文件變化的工具,應該是用于監聽文件變化,然后界面做出響應。執行如下命令: 

    brew install watchman 

  3. 安裝flow 
    flow我個人理解的是用于靜態分析js語法錯誤的工具,能夠更早的js的語法錯誤。執行如下的命令: 

    brew install flow  </p>

    到這里基本的環境就配置好了,下面創建一個iOS的例子,在終端中將目錄切換到你保存工程的目錄,然后執行如下的命令:

    $ npm install -g react-native-cli  
     $ react-native init AwesomeProject     
    $ cd AwesomeProject/
    1. 在git上下載,或者直接clone項目 React native

    2. npm install -g react-native-cli 安裝命令行界面工具。

    3. 在react-native的項目目錄下使用react-native命令行命令init初始化一個demo項目。react-native init DemoProject 
      初始化完成后,在DemoProject目錄下會看到DemoProject.xcodeproj文件,其中的index.ios.js就是控制項目的js文件,簡單的demo,主要界面和邏輯都是在這個js文件里。

    如果執行到第4步,出現npm install或者提示npm start的警告,可以在當前目錄執行一下sudo npm install

    第二個命令第一次執行會執行很長時間,因為需要安裝許多東西。然后再終端輸入如下命令打開工程:

    open ios/AwesomeProject.xcodeproj1

    mahbtekiMacBook-Pro:~ mahb$ react-native init MahbIOSProject

    prompt: Directory MahbIOSProject already exist. Continue?:  (no) yes

    This will walk you through creating a new React Native project in /Users/mahb/MahbIOSProject

    Installing react-native package from npm...

    Setting up new React Native app in /Users/mahb/MahbIOSProject

    To run your app on iOS:

       Open /Users/mahb/MahbIOSProject/ios/MahbIOSProject.xcodeproj in Xcode

       Hit the Run button

    To run your app on Android:

       Have an Android emulator running (quickest way to get started), or a device connected

       cd /Users/mahb/MahbIOSProject

       react-native run-android

    這樣就打開了iOS的工程,運行一下就能看到模擬器中的界面。 
    下面試著修改index.ios.js中的文本,然后在模擬器上按Cmd+R,這樣能夠看到修改馬上就呈現到模擬器上了。

    參考此文檔改寫 http://blog.csdn.net/mengxiangyue/article/details/48603707

    </div>

    來自:http://my.oschina.net/u/615517/blog/537437
 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!