react-native不完全避坑指南(iOS版)

Contents

1. 1. 安装测试
2. 2. 坑
   1. 2.1. node路径 问题
   2. 2.2. 真机测试Bug
   3. 2.3. ES6

安装测试

RN发展的非常非常快，在我写这篇文章（7月22日 星期五）的时候已经更新到0.30版本了

版本发展的太快，导致新手在使用RN时，参考的文档会不可避免的发生一些版本更迭导致的错误（比如语法全面转向ES6等），下面就以0.30为例，我重新写一个RN项目，取名为bitch

首先更新RN版本

sudo npm install -g react-native-cli

测试安装

react-native init bitch
cd bitch

查看package.json

~/workspace/reactnative/bitch » cat package.json 
{
  "name": "bitch",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "react": "15.2.1",
    "react-native": "0.30.0"
  }
}

直接运行iOS模拟器脚本

react-native run-ios

可能会卡一段时间，当前会执行安装iOS APP的脚本，另一个弹出的是node后端，关于所有APP的信息都放在这个服务器上。之后毫无疑问的，渲染出来一个iPhone6的界面应用

然后官方文档就开始撒花了。(懵逼

坑

node路径 问题

我们在使用xcode进行应用安装时，如果你是一个好的jser，会使用nvm(node version manager)管理node版本，但是通过修改.zshrc加入node环境变量启动的话，shell会找不到node命令，xcode会显示build failed，此时要到项目的Build Phases 里去找到shell中的node路径，具体可以通过where node or which node命令查看

真机测试Bug

关于真机调试，中文官方文档是这样说的：

然而实际上要到AppDelegate.m去修改localhost为本机IP才会生效，修改RCTWebSocketExecutor.m没有实质作用(0.27版本)，然而在0.30版本里似乎进行了优化，代码优化如下：

RCTWebSocketExecutor.m

Before

After

测试之后，发现似乎是真机调试时主动把本机IP自动替换localhost，因此不需要修改任何代码就可以进行真机调试

但是0.30版本前的项目还是会有这个坑。可以通过

npm install --save react-native@0.30
react-native upgrade

进行项目更新

实际上，你的app只是一个js解释器，我可以在用一台服务器上开不同的后台让它变成不同的app，只要按装好一次app，就告别Xcode，用你喜欢的编辑器，比如vim，进行iOS的APP编写了。

ES6

其实这个不算一个坑，因为现在ES5是被兼容的。作为一个prototype的忠实用户，对于所有的oo语言是无法接受的，何必要包上一层糖纸去迎合那些没有class就活不下去的人呢？ES6的到来完全抢走了JS各种方言的饭碗，像之前很多人推荐的CoffeeScript、TypeScript。我大原型链指针灵活，继承自由，现在被强行规范化了。rn马上也要抛弃es5了，如果你没有接触过es5的话，那这个就不是一个坑，自动忽视掉之前版本的教程、官方/非官方例子就好。慢慢的习惯每个自定义view都用上class和它的构造函数吧。