基本環(huán)境安裝
1.安裝Homebrew(這是安裝Node.js和其他工具的基礎(chǔ)環(huán)境)
打開終端，輸入以下指令
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
經(jīng)過(guò)漫長(zhǎng)的等待督惰，大概下載了十幾分鐘吧算柳。所以不要著急。下載完會(huì)有如下success的提示
注意：中間會(huì)有按一下回車的提示旧蛾，敲下回車就可以了
2.安裝Node.js
如果上一步Homebrew不成功的話會(huì)提示
-bash: brew: command not found
安裝Node.js命令如下
brew install node
這里可能會(huì)自動(dòng)更新一下Homebrew，等著就行了蠕嫁。安裝完成之后可以通過(guò)以下命令查看安裝的Node.js的版本
npm -v
3.安裝React Native命令行工具
通過(guò)npm包管理工具進(jìn)行安裝
npm install -g react-native-cli
命令行工具安裝完成之后锨天，可以通過(guò)react-native --help來(lái)查看所有命令
Usage: react-native [command] [options]
Commands:
init <ProjectName> [options] generates a new project and installs its dependencies
Options:
-h, --help output usage information
-v, --version output the version number
比如：可以直接通過(guò)init后面跟項(xiàng)目名稱初始化一個(gè)RN項(xiàng)目，-h可以查看幫助文檔剃毒，-v可以查看當(dāng)前版本
開發(fā)工具下載
- 安卓開發(fā)：Android Studio
- iOS開發(fā)：通過(guò)App Store直接搜索下載
React Native應(yīng)用快速構(gòu)建
1.初始化項(xiàng)目
首先cd到你需要?jiǎng)?chuàng)建項(xiàng)目的目錄病袄，比如 cd Desktop/ 創(chuàng)建到桌面
輸入命令行，其中FirstApp就是你的項(xiàng)目名稱
react-native init FirstApp
安裝完成后會(huì)有如何運(yùn)行項(xiàng)目的提示信息
To run your app on iOS:
cd /Users/mazheng/Desktop/FirstApp
react-native run-ios
- or -
Open ios/FirstApp.xcodeproj in Xcode
Hit the Run button
To run your app on Android:
cd /Users/mazheng/Desktop/FirstApp
Have an Android emulator running (quickest way to get started), or a device connected
react-native run-android
2.命令行運(yùn)行RN項(xiàng)目
首先cd到項(xiàng)目目錄赘阀，比如cd到上面創(chuàng)建的FirstApp文件夾陪拘，運(yùn)行命令(iOS為例)
react-native run-ios
之后會(huì)啟動(dòng)iPhone模擬器，并自動(dòng)打開一個(gè)窗口纤壁，這個(gè)窗口主要是運(yùn)行包管理器左刽，向模擬器同步代碼
可能會(huì)出現(xiàn)的問(wèn)題
- 如果遇到error: unable to find utility "instruments", not a developer tool or in PATH錯(cuò)誤信息，可輸入指令解決
sudo xcode-select -s /Applications/Xcode.app/Contents/Developer/如果電腦上安裝多個(gè)版本的Xcode酌媒，可替換命令中的Xcode為你想要運(yùn)行的版本欠痴，如電腦上還存在Xcode8.3迄靠，可修改命令為sudo xcode-select -s /Applications/Xcode8.3.app/Contents/Developer/即可解決 -
如果運(yùn)行起來(lái)一片紅，如下圖
運(yùn)行錯(cuò)誤
解決方法：
- 打開兩個(gè)終端
-
第一個(gè)終端輸入react-native start
啟動(dòng)完成 - 第二個(gè)終端輸入react-native run-ios運(yùn)行
運(yùn)行成功
注意：兩個(gè)終端都需要cd到項(xiàng)目目錄哦
