在MAC 上搭建React Native 開發(fā)環(huán)境

React Native 官網(wǎng)

http://facebook.github.io/react-native/docs/getting-started.html#content

中文網(wǎng)站

http://reactnative.cn/docs/0.43/getting-started.html

一 、安裝Homebrew

??如果你電腦上沒有裝Xcode 的話,請先安裝好Xode 之后再安裝Homebrew

(1)Homebrew是什么

Homebrew 官網(wǎng) https://brew.sh/index_zh-cn.html

Homebrew is the easiest and most flexible way to install the UNIX tools Apple didn’t include with macOS.(Homebrew是一個包管理器,用于在Mac上安裝一些OS X沒有的UNIX工具)。

Homebrew是一款Mac OS平臺下的軟件包管理工具,擁有安裝、卸載、更新、查看、搜索等很多實(shí)用的功能。簡單的一條指令,就可以實(shí)現(xiàn)包管理,而不用你關(guān)心各種依賴和文件路徑的情況,十分方便快捷。

(2)安裝

打開終端輸入以下命令

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

然后回車就會出現(xiàn)下面的這樣

image
image

再次回車

image
image

輸入電腦的登錄密碼,然后等待一會兒安裝就完成了。

(3)一些常見的命令

安裝完成之后在終端輸入brew doctor 驗(yàn)證brew是否安裝成功。

brew doctor

查看brew 常用的命令,在終端輸入brew help

brew help

結(jié)果示例

Example usage:
brew search [TEXT|/REGEX/]
brew (info|home|options) [FORMULA...]
brew install FORMULA...
brew update
brew upgrade [FORMULA...]
brew uninstall FORMULA...
brew list [FORMULA...]

Troubleshooting:
brew config
brew doctor
brew install -vd FORMULA

Developers:
brew create [URL [--no-fetch]]
brew edit [FORMULA...]
http://docs.brew.sh/Formula-Cookbook.html

Further help:
man brew
brew help [COMMAND]
brew home

安裝軟件 brew install 軟件名字(例如git)

brew install git

卸載軟件 brew uninstall 軟件名字(例如git)

brew uninstall wget

卸載軟件brew remove XXX

brew remove wget

檢索軟件 brew search part_of_package_name 、brew search /regular_expression/

brew search git

檢查指定包是否已經(jīng)安裝 brew list | grep package_home

下載安裝包但不安裝 brew fetch package_name

查看安裝包信息 brew info package_name

訪問指定包的homepage brew home package_name

列出安裝包的內(nèi)容 brew list package_name

更新安裝包 brew upgrade package_name

列出系統(tǒng)上安裝的所有包brew list

brew list

更新所有安裝包brew update(更新自己)

brew update

??brew 安裝的軟件存放在 /usr/local/Cellar 中,同時會在 /usr/local/bin, /usr/local/sbin, /usr/local/lib 中創(chuàng)建鏈接。你可能需要將 /usr/local/sbin 添加到搜索路徑中。

(4)卸載brew在終端輸入(沒有親自測試不知是否可用)

cd `brew –prefix`
rm -rf Cellar
brew prune 
rm `git ls-files` 
rm -rf Library .git .gitignore bin/brew
rm  -rf README.md share/man/man1/brew
rm -rf Library/Homebrew Library/Aliases 
rm -rf Library/Formula Library/Contributions
rm -rf ~/Library/Caches/Homebrew

??在Mac OS X 10.11系統(tǒng)以后,/usr/local/等系統(tǒng)目錄下的文件讀寫是需要系統(tǒng)root權(quán)限的,以往的Homebrew安裝如果沒有指定安裝路徑,會默認(rèn)安裝在這些需要系統(tǒng)root用戶讀寫權(quán)限的目錄下,導(dǎo)致有些指令需要添加sudo前綴來執(zhí)行,比如升級Homebrew需要:

  1. 對/usr/local 目錄下的文件讀寫進(jìn)行root用戶授權(quán)

$ sudo chown -R $USER /usr/local

示例

$ sudo chown -R wentianen /usr/local

2.(推薦)安裝Homebrew時對安裝路徑進(jìn)行指定,直接安裝在不需要系統(tǒng)root用戶授權(quán)就可以自由讀寫的目錄下

<install path> -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

參考文章
http://blog.csdn.net/andanlan/article/details/51589800

二、安裝node、Watchman

You will need Node.js, Watchman, the React Native command line interface, and Xcode.

We recommend installing Node and Watchman using Homebrew. Run the following commands in a Terminal after installing Homebrew: (我們建議您使用Homebrew安裝Node和Watchman。在安裝Homebrew后,在終端中運(yùn)行以下命令:

在終端輸入下面的命令

brew install node
brew install watchman

Watchman is a tool by Facebook for watching changes in the filesystem. It is highly recommended you install it for better performance.(Watchman )(Watchman是Facebook的工具,用于監(jiān)視文件系統(tǒng)的更改。強(qiáng)烈建議您安裝它以獲得更好的性能。

Node.js comes with npm, which lets you install the React Native command line interface.

三、創(chuàng)建一個簡單的工程

Run the following command in a Terminal:(Node.js帶有npm,它允許您安裝React Native命令行界面。 在終端中運(yùn)行以下命令)

npm install -g react-native-cli

(Use the React Native command line interface to generate a new React Native project called "AwesomeProject", then run react-native run-ios inside the newly created folder.
使用React Native命令行界面生成一個名為“AwesomeProject”的新的React Native項目)

react-native init AwesomeProject

我們可以再系統(tǒng)根目錄下面看到新創(chuàng)建的工程


image
image

然后再終端中進(jìn)入這個工程

cd AwesomeProject
react-native run-ios

然后會打開一個終端窗口如下,切記不要關(guān)閉這個終端窗口。

image
image

程序跑起來的效果(默認(rèn)使用的是iphone 6的模擬器)

image

用文本編輯器打開工程里面的index.ios.js 文件。

image
image

打開后我們進(jìn)行一些簡單的文本替換,然后按command + s 保存修改

image
image

然后選擇模擬器按Command+ r就可以重新編譯程序。

image
image

總結(jié):在家閑著沒事瞎搞的,如果寫的又不對的地方,請大家指出來,我會修正的。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容