搭建開發環境
一、安裝依賴
必須安裝的依賴有:Node、Watchman 和 React Native 命令行工具以及 Xcode。
1、首先安裝 Homebrew
2、安裝 Node, Watchman
brew install node
補充:Node.js是一個用Chrome's V8 JavaScript engine構建的 JavaScript 運行時框架。Node.js使用事件驅動、非阻塞式 I/O 模塊使得它非常的輕量級和非常的高效。Node.js的生態系統 npm 是世界上最大的開源庫生態系統。 npm的全稱是Node Package Manager,是Nodejs的包管理器。Node.js本身提供了基本的模塊,但是我們利用這些基本模塊開發實際應用需要編寫大量的代碼,做較多的工作。npm上已經有很多Node.js庫或框架,這些庫或框架可以幫助Node.js的開發者用較少的代碼完成較復雜的應用。除了使用Homebrew來安裝 Node外,我們可以從首先從官網下載Node.js 。然后一步一步安裝即可,最后安裝成功后,可以看到Node.js 和npm 都已經安裝成功了,並且安裝在/usr/local/bin目錄下。
下載地址:Node.js 官網
如果你已經安裝了 Node,請檢查其版本是否在 v8.3 以上。如下:
node -v
v8.8.1
更新node(更新完之后,npm也自動更新)
brew upgrade node
如果你已經安裝了 npm,也可以先檢查下版本號
npm -v
5.5.1
1、安裝n模塊:npm install -g n
2、升級node.js到最新穩定版: n stable
3、安裝指定版本: n v8.11.3
如果報下面的這個錯誤的話: Error: sudo required
則使用下面的這個命令: sudo n v8.11.3
注意:Node不要隨便更新到最新版,更新完后莫名其妙的問題一大堆,選擇使用最多的Node版本有時候可以解決很多問題。
Watchman則是由 Facebook 提供的監視文件系統變更的工具。安裝此工具可以提高開發時的性能(packager 可以快速捕捉文件的變化從而實現實時刷新)。
brew install watchman
3、Yarn、React Native 的命令行工具(react-native-cli)
Yarn是 Facebook 提供的替代 npm 的工具,可以加速 node 模塊的下載。React Native 的命令行工具用於執行創建、初始化、更新項目、運行打包服務(packager)等任務。
npm install -g yarn react-native-cli
安裝完 yarn 之后就可以用 yarn 代替 npm 了,例如用yarn代替npm install命令,用yarn add 某第三方庫名代替npm install 某第三方庫名。
4、Xcode
React Native 目前需要Xcode 9.4 或更高版本。你可以通過 App Store 或是到Apple 開發者官網上下載。這一步驟會同時安裝 Xcode IDE、Xcode 的命令行工具和 iOS 模擬器。
Xcode 的命令行工具
啟動 Xcode,並在Xcode | Preferences | Locations菜單中檢查一下是否裝有某個版本的Command Line Tools。Xcode 的命令行工具中包含一些必須的工具,比如git等。
二、創建新項目
使用 React Native 命令行工具來創建一個名為"yooweiProject"的新項目:
!!!注意!!!:init 命令默認會創建最新的版本,而目前最新的 0.45 及以上版本需要下載 boost 等幾個第三方庫編譯。這些庫在國內即便翻牆也很難下載成功,導致很多人無法運行iOS項目!!!中文網在論壇中提供了這些庫的國內下載鏈接。如果你嫌麻煩,又沒有對新版本的需求,那么可以暫時創建0.44.3的版本。
如果你是想把 React Native 集成到現有的原生項目中,則步驟完全不同,請參考集成到現有原生應用。
補充說明:RN iOS 0.45以上版本開始需要依賴一些第三方編譯庫,這些庫在國內下載都非常困難(一般的翻牆工具都很難下載)
未來RN不同版本可能依賴不同版本的第三方編譯庫,具體所需庫和版本請查看ios-install-third-party.sh文件,注意先把左上角的branch切換到對應的版本。

然后查看需求依賴的第三方的版本:

然后去網盤里下載↓
第三方依賴庫百度盤鏈接: http://pan.baidu.com/s/1kVDUAZ9
下下來后請放置到以下目錄中:
0.58及以上版本:
~/Library/Caches/com.facebook.ReactNativeBuild
0.58以下的版本:
~/.rncache
問題是怎么來到上面的這個目錄呢?
在mac訪達finder下,利用前往文件夾,然后將~/.rncache 輸入,點擊回車就會來到該目錄下了。
全部復制完成后,就可以開始init新的RN項目,或者刪掉已有項目的node_modules重新npm install再run-ios。
三、編譯並運行 React Native 應用
在你的項目目錄中運行react-native run-ios:
To run your app on iOS:
cd /Users/galahad/Desktop/ziliao/RN0.57/yooweiProject
react-native run-ios
- or -
Open ios/yooweiProject.xcodeproj in Xcode
Hit the Run button
To run your app on Android:
cd /Users/galahad/Desktop/ziliao/RN0.57/yooweiProject
Have an Android emulator running (quickest way to get started), or a device connected
react-native run-android
提示:如果 run-ios 無法正常運行,請使用 Xcode 運行來查看具體錯誤(run-ios 的報錯沒有任何具體信息)。
react-native run-ios只是運行應用的方式之一。你也可以在 Xcode 中直接運行應用。如果你無法正常運行,先回頭仔細對照文檔檢查,然后可以看看論壇的求助專區。
在真機上運行
上面的命令會自動在 iOS 模擬器上運行應用,如果你想在真機上運行,則請閱讀在設備上運行這篇文檔。
修改項目
現在你已經成功運行了項目,我們可以開始嘗試動手改一改了:
- 使用你喜歡的編輯器打開
App.js並隨便改上幾行。 - 在 iOS 模擬器中按下
⌘-R就可以刷新 APP 並看到你的最新修改!(如果沒有反應,請檢查模擬器的 Hardware 菜單中,connect hardware keyboard 選項是否選中開啟)
完成了!
恭喜!你已經成功運行並修改了你的第一個 React Native 應用。
注意:
1、你可以新建一個項目,然后用上面的代碼覆蓋你的index.ios.js或是index.android.js 文件,然后運行看看。這個是0.48的描述
你可以新建一個項目,然后用上面的代碼覆蓋你的App.js文件,然后運行看看。這個是0.49的描述。
自從0.49開始,index.ios.js 和 index.android.js 就不存在了,統一為index.js ,同時多了一個App.js文件。要注意分辨。
2、用react-native init 的工程, iOS文件夾中的main.jsbundle找不到,紅色的,是正常的么?
是正常的 這文件是打離線包時候可以用到的文件 需要用 react-native bundle 命令生成。
