你可以了解到
- 从环境搭建到真机运行第一个RN项目
- RN项目的一般工程结构
- 基本xcode，ios模拟器操作
- 调试方法
- 工具选用和一些小技巧
mac OS 环境配置
开发环境
brew install node # node
brew install node
个人建议去官网下载LTS（Long-term Support官方长期支持）版本， https://nodejs.org/en/
brew install watchman # watchman 监控项目文件是否改动，用作 hot reload 等
npm install -g react-native-cli # 安装react-native node 项目，使用npm包
echo "registry=https://registry.npm.taobao.org" > ~/.npmrc # 使用淘宝源
检查
node -v # 版本 >= 4, 建议使用最新 LTS目前v6.9.4
watchman -v # 目前版本是 4.7.0
react-native -v # 目前 2.0.1
cat ~/.npmrc # 输出registry=https://registry.npm.taobao.org
安装xcode 和 运行环境
- 安装或升级 xcode 至最新版本
- 打开 xcode，cmd + shift + 2，simulator模拟器
- 没有想要的Simulator OS版本需要自行下载，(React Native 支持 iOS 8.0 以上)，这里以为10.2示例
- 真机调试：解锁状态下，连接数据线，并且每次编译运行程序也都需要解锁
安装了XCode，但是大部分开发工作都不在 XCode 完成，我们需要一个IDE，可选的IDE有：
- 推荐 WebStorm http://www.jetbrains.com/webstorm/ 30天免费试用，一般试用完就新版可以卸载重新安装，或者免费试用他家测试版本，或者付费使用。
- Sublime 很多前端工程师的IDE首选
- facebook 自家的 nuclide https://nuclide.io/ atom + nuclide插件，但并不好用，配置麻烦。
so，为了能专注于React Native开发，请优先使用 WebStorm。
初始化项目
这里使用 myproject 作为项目名称，（初始化后更改较麻烦）
mkdir -p /data/app
cd /data/app
react-native init myproject # 大约1分半,
运行
命令行运行 myproject 工程
cd /data/app/myproject
react-native run-ios
xcode 运行
cd /data/app/myproject
open ios/myproject.xcodeproj
点击左上角三角形"运行"按钮
如果需要在真机调试，还需要做如下操作：
- bundle identifier 设置唯一的id
- signing 勾选Automatically manage signing
- Team 选择自己的appid
xcode 刚刚开启项目，状态栏会有 Indexing | Processing files， 插入手机，状态栏也会有 is busy processing symbol files, 直接点击运行以上处理完会自动开始编译运行，静静等待吧。
运气不错，成功运行起来了。接下来学习操作，iOS模拟器吧。
iOS模拟器操作
cmd + shift + h 是home键，重复两次可看到所有开启的app，按住上滑退出。(这是模拟器自带的)
cmd + r 重新加载app。编译运行app后，修改js代码，可直接刷新页面，或者开启 live/hot reload
cmd + d 可以调出菜单，(真机可以摇一摇，小心别飞出去了:-D)，
2和3都是调试手段，所以必须xcode 编译 debug 包才可使用，release 不可使用。
如果你看到你的模拟器动画很慢，可以检查 "菜单 - Debug - Show Animations" 是否开启，快捷键 cmd + t
如果你在调试 iphone 7 普拉斯，超出mac屏幕，"菜单 - Window - Scale"，或使用 cmd + 1，2，3，4，调整比例， 对应100%,75%,50%,25%
cmd + d 和摇一摇调出的app菜单
- Reload 效果同 cmd + r， 重新加载js并重新启动app
- Debug JS Remotely 远程调试app，将开启默认浏览器，http://localhost:8081/debugger-ui, cmd + option + t 并选中Console标签，js 的console.log(); 将会打印到该窗口，可以展开查看对象的详情。
- Enable Live Reload 开启动态加载更新，js文件保存后，自动重启app，
- Enable Hot Reload 开启热加载，js文件保存后，(自动增量加载js, 个人见解)，与Live Reload不同就是会停留在当前页面并且变更逻辑。所以Hot Reload 比 Live Reload "高级", (需要最开始安装的watchman支持），所以只开启 Hot Reload 就可以了。（试验得出的结论，如有官方说明，请联系以变更谢谢！）
- Start Systrace 系统跟踪，会生成一个 html, 暂时未使用到该功能，欢迎补充。
- Show Inspector 类似 chrome 的Elements元素布局检查，实际开发很有用。
- Show Perf Monitor 性能监控或者说页面绘制情况，Perf==Performance，
- 内存占用，
- jsc(这个不知道是啥sorry)，
- view的数量(上：已渲染，下：已加载)，
- UI 线程帧率和JS线程帧率，这两个越高越好 :-D
代码文件夹结构
默认文件，不建议修改：
- /android/ 安卓工程文件夹
- /ios/ iOS工程文件夹
- /node_modules/ node模块包，记得添加到.gitignore文件中
- /index.android.js react native 安卓项目的入口文件
- /index.ios.js react native iOS 项目的入口文件
- /package.json npm管理配置，使用新的npm包，请提交，同时该文件变更，也需执行npm install
- …… 更多
项目文件：
- /App/ js 代码存放目录
- /App/Component/ 存放组件
- /App/Utils/ 存放工具类
- /App/View/ 存放View视图文件
- …… 更多
代码风格：
- 文件夹：大驼峰法（帕斯卡命名法）
- 文件：驼峰命名
- 变量：驼峰命名
- 其他代码风格，建议使用WebStorm自动格式化的标准。
WebStorm 使用小技巧
- 菜单 - Code - Reformat Code 格式化代码，快捷键cmd + option + L，时不时格式化一下，如果是多人协同工作，可以对“选中行区块”进行格式化
- 菜单 - Code - Optmize Import 优化引入，快捷键cmd + option + O，会优化多余的import，执行完请务必进行自测
- 代码变量 - 右键 - refactor - rename 重命名，快捷键 Fn + shift + F6 作用域下的变量重命名
- 文件列表 - 在文件上右键 - Local History - show history 可以查看和恢复文件本地的历史记录，如果文件还没来得及提交到版本控制中，不小心删了某段代码甚至这个文件，都可以找回(删除文件找回的办法，先新建同名文件，再show history！)。 实用指数⭐️⭐️⭐️⭐️⭐️
协同工作
mac 文件路径不区分大小写，(文件系统原因，更改需重装系统)，
分支开发
-
develop分支代码合并到master分支：
- 先提交到自己分支 git commit，
- 合并master到自己分支 git merge origin/master,
- 有冲突先解决冲突，
- 自测没毛病推送到远程分支 git push origin develop
- 切换到master分支 git checkout master
- 推送到远程分支 git push origin master
git push -f origin master 强制推送本地的master分支， 需要在gitlab上把master分支解除protected状态
git branch -d develop; git push origin :develop 如果一个分支已合并到master并且不会再在该分支开发，可以删除，本地和远程分支。
-
如果用gitlab，可以试试pull request。
文档
- React Native 官网
- React Native 中文网
- …... 更多
