[React Native]1. Hello World熟悉RN的开发环境（macOS）

你可以了解到

1. 从环境搭建到真机运行第一个RN项目
2. RN项目的一般工程结构
3. 基本xcode，ios模拟器操作
4. 调试方法
5. 工具选用和一些小技巧

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 和 运行环境

1. 安装或升级 xcode 至最新版本
2. 打开 xcode，cmd + shift + 2，simulator模拟器
3. 没有想要的Simulator OS版本需要自行下载，(React Native 支持 iOS 8.0 以上)，这里以为10.2示例
4. 真机调试：解锁状态下，连接数据线，并且每次编译运行程序也都需要解锁

配置模拟器

安装了XCode，但是大部分开发工作都不在 XCode 完成，我们需要一个IDE，可选的IDE有：

1. 推荐 WebStorm http://www.jetbrains.com/webstorm/ 30天免费试用，一般试用完就新版可以卸载重新安装，或者免费试用他家测试版本，或者付费使用。
2. Sublime 很多前端工程师的IDE首选
3. 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

点击左上角三角形"运行"按钮

xcode 配置

如果需要在真机调试，还需要做如下操作：

1. bundle identifier 设置唯一的id
2. signing 勾选Automatically manage signing
3. Team 选择自己的appid

ios project 设置

xcode 刚刚开启项目，状态栏会有 Indexing | Processing files， 插入手机，状态栏也会有 is busy processing symbol files, 直接点击运行以上处理完会自动开始编译运行，静静等待吧。

ios模拟器

运气不错，成功运行起来了。接下来学习操作，iOS模拟器吧。

iOS模拟器操作

1. cmd + shift + h 是home键，重复两次可看到所有开启的app，按住上滑退出。(这是模拟器自带的)

2. cmd + r 重新加载app。编译运行app后，修改js代码，可直接刷新页面，或者开启 live/hot reload

3. cmd + d 可以调出菜单，(真机可以摇一摇，小心别飞出去了:-D)，

4. 2和3都是调试手段，所以必须xcode 编译 debug 包才可使用，release 不可使用。

5. 如果你看到你的模拟器动画很慢，可以检查 "菜单 - Debug - Show Animations" 是否开启，快捷键 cmd + t

6. 如果你在调试 iphone 7 普拉斯，超出mac屏幕，"菜单 - Window - Scale"，或使用 cmd + 1，2，3，4，调整比例， 对应100%,75%,50%,25%

cmd + d 和摇一摇调出的app菜单

1. Reload 效果同 cmd + r， 重新加载js并重新启动app
2. Debug JS Remotely 远程调试app，将开启默认浏览器，http://localhost:8081/debugger-ui, cmd + option + t 并选中Console标签，js 的console.log(); 将会打印到该窗口，可以展开查看对象的详情。
3. Enable Live Reload 开启动态加载更新，js文件保存后，自动重启app，
4. Enable Hot Reload 开启热加载，js文件保存后，(自动增量加载js, 个人见解)，与Live Reload不同就是会停留在当前页面并且变更逻辑。所以Hot Reload 比 Live Reload "高级", (需要最开始安装的watchman支持），所以只开启 Hot Reload 就可以了。（试验得出的结论，如有官方说明，请联系以变更谢谢！）
5. Start Systrace 系统跟踪，会生成一个 html, 暂时未使用到该功能，欢迎补充。
6. Show Inspector 类似 chrome 的Elements元素布局检查，实际开发很有用。
7. Show Perf Monitor 性能监控或者说页面绘制情况，Perf==Performance，
   1. 内存占用，
   2. jsc(这个不知道是啥sorry)，
   3. view的数量(上：已渲染，下：已加载)，
   4. UI 线程帧率和JS线程帧率，这两个越高越好 :-D

代码文件夹结构

默认文件，不建议修改：

1. /android/ 安卓工程文件夹
2. /ios/ iOS工程文件夹
3. /node_modules/ node模块包，记得添加到.gitignore文件中
4. /index.android.js react native 安卓项目的入口文件
5. /index.ios.js react native iOS 项目的入口文件
6. /package.json npm管理配置，使用新的npm包，请提交，同时该文件变更，也需执行npm install
7. …… 更多

项目文件：

1. /App/ js 代码存放目录
2. /App/Component/ 存放组件
3. /App/Utils/ 存放工具类
4. /App/View/ 存放View视图文件
5. …… 更多

代码风格：

1. 文件夹：大驼峰法（帕斯卡命名法）
2. 文件：驼峰命名
3. 变量：驼峰命名
4. 其他代码风格，建议使用WebStorm自动格式化的标准。

WebStorm 使用小技巧

1. 菜单 - Code - Reformat Code 格式化代码，快捷键cmd + option + L，时不时格式化一下，如果是多人协同工作，可以对“选中行区块”进行格式化
2. 菜单 - Code - Optmize Import 优化引入，快捷键cmd + option + O，会优化多余的import，执行完请务必进行自测
3. 代码变量 - 右键 - refactor - rename 重命名，快捷键 Fn + shift + F6 作用域下的变量重命名
4. 文件列表 - 在文件上右键 - Local History - show history 可以查看和恢复文件本地的历史记录，如果文件还没来得及提交到版本控制中，不小心删了某段代码甚至这个文件，都可以找回(删除文件找回的办法，先新建同名文件，再show history！)。 实用指数⭐️⭐️⭐️⭐️⭐️

协同工作

1. mac 文件路径不区分大小写，(文件系统原因，更改需重装系统)，

2. 分支开发

3. develop分支代码合并到master分支：

   1. 先提交到自己分支 git commit，
   2. 合并master到自己分支 git merge origin/master,
   3. 有冲突先解决冲突，
   4. 自测没毛病推送到远程分支 git push origin develop
   5. 切换到master分支 git checkout master
   6. 推送到远程分支 git push origin master

4. git push -f origin master 强制推送本地的master分支， 需要在gitlab上把master分支解除protected状态

5. git branch -d develop; git push origin :develop 如果一个分支已合并到master并且不会再在该分支开发，可以删除，本地和远程分支。

6. 如果用gitlab，可以试试pull request。

   ​

文档

1. React Native 官网
2. React Native 中文网
3. …... 更多