React Native環境配置列表 Mac版

一、Homebrew相關

Mac系統的包管理器，用於安裝NodeJS和一些其餘必需的工具軟件。

二、Node

React Native目前須要NodeJS 5.0或更高版本。

命令：

一、brew install node

二、設置npm鏡像加速

npm config set registry https://registry.npm.taobao.org --global

npm config set disturl https://npm.taobao.org/dist --global

查看配置命令： npm config list

三、Yarn

Yarn是Facebook提供的替代npm的工具，能夠加速node模塊的下載。React Native的命令行工具用於執行建立、初始化、更新項目、運行打包服務（packager）等任務。

四、Watchman

Watchman是由Facebook提供的監視文件系統變動的工具。安裝此工具能夠提升開發時的性能（packager能夠快速捕捉文件的變化從而實現實時刷新）。

五、開發工具

sublimetext

http://www.sublimetext.com/3

5.一、簡單的安裝方法

使用Ctrl+`快捷鍵或者經過View->Show Console菜單打開命令行，粘貼以下代碼：

import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

安裝完畢後將在Preferences菜單下看到Package Settings和Package Control兩個菜單了。

順便貼下Sublime Text2 的代碼：

import urllib2,os; pf='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation')

5.二、手動安裝

可能因爲各類緣由，沒法使用代碼安裝，那能夠經過如下步驟手動安裝Package Control：

1.點擊Preferences > Browse Packages菜單

2.進入打開的目錄的上層目錄，而後再進入Installed Packages/目錄

3.下載Package Control.sublime-package並複製到Installed Packages/目錄

4.重啓Sublime Text。

5.三、安裝sublime的插件也是常見使用sublime的問題，步驟以下：

1.打開Sublime Text3 ，點擊菜單欄的「Preferences」-->"Package Control",或者可使用快捷鍵CTRL+SHIFT+P 打開

2.在打開的終端窗口，輸入「install」,下方就會提示「Package Control:install package」,用鼠標點擊

3.這時候等待幾秒，就會彈出一個終端，在終端輸入你想要安裝的插件，進行查找，點擊下方列表中插件，就會自動會爲你安裝了。

React Native開發推薦的一些插件：

• ReactJS : 支持React開發，代碼提示，高亮顯示；
• Emmet ：前端開發必備；
• Terminal : 在sublime中打開終端並定位到當前目錄，神器，mac下的快捷鍵爲：command+shift+T；
• react-native-snippets：react native 的代碼片斷。

其餘的插件能夠參考這裏：http://segmentfault.com/a/1190000003698071

六、配置Eslint檢測React代碼

七、FileBrowser