First：React native搭建记录

零：写在前面

• 1.公司要部分界面换成react native 实现，主要看重的是更新不用等待漫长的审核期以及动态模板的装配。所以特此来研究一下react native的混编。

• 2.这个教程可能会很多部分组成，记录碰到的各种问题，与君共享。

• 3.这个系列只针对于像我一样对前端知识体系理解基本为0的人。

• 4.有写的不对的地方，望君斧正。谢谢。

一.：开发环境搭建

1.1 home brew（包管理工具）

用于安装node js和其它的一些软件包
打开终端运行：
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

1.2 Node.js

用homebrew 安装node js
1.brew install node
2.安装完后最好设置一下npm的镜像，用的淘宝的源。
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

1.3 React native 命令行+Yarn（代替npm）

yarn是代替npm的工具，可以加速node模块的下载。
打开终端
1.安装 ：npm install -g yarn react-native-cli
2.设置镜像源：
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

note：如果permission denied，需要修复一下usr/local的读写权限，终端执行
sudo chown -R `whoami` /usr/local
安装完毕后，在以后的使用中可以使用yarn add代替npm add等

1.4Watch man

facebook 提供的监视文件系统变更的工具，可以提高开发时的性能bulabula。。。
安装方法：
brew install watchman

二.IDE安装以及插件安装

2.1 sublime text 2

webstorm比较重，碍与电脑的配置等限制因素，选用sublime 作为开发的ide。
sublime 是轻量级的文本编辑器。
下载：https://www.sublimetext.com/2

2.2 sublime 安装react native 插件

2.2.1安装package control

1.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')

如果是sublime text3，复制以下命令：
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())

2.退出并重启sublime text，command + shift + p即可呼出package control界面

2.2.2 安装插件

note:呼出package界面，输入install，enter之后等待进入安装插件界面，搜索插件安装即可

一下列出的建议安装的插件：
1.reactjs：代码提示+高亮
2.emmet
3.terminal
4.react-native-snippets：代码片段 (https://github.com/Shrugs/react-native-snippets),括号里为项目地址，可以查看具体用法及配置
5.AutoFileName：自动补全文件路径，显示图片大小等
6.All Autocomplete ：cmd+t载入需要调用的js代码，会有相应提示

更全的请看这里：https://segmentfault.com/a/1190000003698071
用到什么安装配置即可

三：react native 初体验

1.打开终端，cd到你想要放置项目的目录
2.react-native init /*项目名*/，等待安装结束。
3.cd /*项目名*/ 
4.执行react-native run-ios，等待配置结束。
如果你的xcode 是copy过来的，会出错，
需要重新选择xcode的位置，终端执行命令：
sudo xcode-select -s /Applications/Xcode.app/Contents/Developer/
5.模拟器启动之后，就可以看到界面了，尝试修改

四：遇到的坑

4.1 There are no packages available for installation

解决办法：
Preferences > Package Settings > Package Control > Settings - User
添加
"channels":
    [
        "http://cst.stu.126.net/u/json/cms/channel_v3.json",
        //"https://packagecontrol.io/channel_v3.json",
        //"https://web.archive.org/web/20160103232808/https://packagecontrol.io/channel_v3.json",
        //"https://gist.githubusercontent.com/nick1m/660ed046a096dae0b0ab/raw/e6e9e23a0bb48b44537f61025fbc359f8d586eb4/channel_v3.json"
    ],

五：运行到本地

将手机和电脑连接至同一局域网下
1.进入项目目录/iOS 打开project
2.打开RCTWebSocket 
3.RCTWebSocketExecutor 将localhost 改为电脑的IP地址
打开程序通过摇晃手机可以调出developer menu将hot reloading打开，可以进行实时更新。
这样每次sublime 保存后，都可以实时更新到手机上。
坑：
1.Signing for "xxx" requires a development team. 
Select a development team in the project editor.
解决办法：需要到target中下的xxTests，选择自己的apple team即可