React Native 開發之 (02) 用Sublime 3作為React Native的開發IDE

　　Sublime Text是一個代碼編輯器。也是HTML和散文先進的文本編輯器。漂亮的用戶界面和非凡的功能，例如：迷你地圖，多選擇Python插件，代碼段等等。完全可自定義鍵綁定，菜單和工具欄等等.漂亮的用戶界面和非凡的功能，Sublime Text的主要功能包括：拼寫檢查，書簽，完整的 Python API ， Goto 功能，即時項目切換，多選擇，多窗口等等。

1.下載安裝Sublime 3

　　Sublime 3的下載地址：

http://www.sublimetext.com/3

選着相應的平台進行下載，然后安裝就行了。這里LZ選用Mac 平台下的SublineText3進行安裝

1）雙擊Sublime Text Build 3.dmg

2） 拖動 Subline Text.app到 Applications.

2.安裝Package Control　　

　　默認的Sublime 3中沒有Package Control，要進行安裝之后才能用這個去安裝其他的插件。

　　簡單的安裝方法使用Ctrl+`快捷鍵或者通過View->Show Console菜單打開命令行，粘貼如下代碼：

import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

或者

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())

或者官網提供的方法：

https://packagecontrol.io/installation#st3

如果順利的話，此時就可以在Preferences菜單下看到Package Settings和Package Control兩個菜單了。

3.安裝需要用到的插件　　

　　安裝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 的代碼片段

//支持的代碼片段如下
cdm→  componentDidMount: fn() { ... }
cdup→  componentDidUpdate: fn(pp, ps) { ... }
cs→  var cx = React.addons.classSet;
cwm→  componentWillMount: fn() { ... }
cwr→  componentWillReceiveProps: fn(np) { ... }
cwu→  componentWillUpdate: fn(np, ns) { ... }
cwun→  componentWillUnmount: fn() { ... }
cx→  cx({ ... })
fdn→  React.findDOMNode(...)
fup→  forceUpdate(...)
gdp→  getDefaultProps: fn() { return {...} } 
gis→  getInitialState: fn() { return {...} } 
ism→  isMounted()
props→  this.props.
pt→  propTypes { ... }
rcc→  component skeleton
refs→  this.refs.
ren→  render: fn() { return ... }
scu→  shouldComponentUpdate: fn(np, ns) { ... }
sst→  this.setState({ ... })
state→  this.state.

 

其他的插件可以參考這里：http://segmentfault.com/a/1190000003698071

選擇一些實用的安裝就行了。

推薦一個sublime material 風格主題：Material ，直接去搜這個插件就能安裝，介紹地址：這里

安裝之后的效果圖：

4.導入項目　　

　　點擊菜單欄的“Project”-->"Add Folder to Project" ，選擇項目的目錄，就將項目導入進來了。

5.調試運行項目

　　上面添加了Terminal插件，在sublime里，直接用快捷鍵 command+shift+T，打開終端，然后執行如下命令運行 IOS 應用程序：

react-native run-ios