搭建開發環境
一、安裝依賴
必須安裝的依賴有: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 命令生成。