React Native学习笔记-1.编通样例工程的小问题

之前一直是主攻Android开发方向的，最近在前端好友的拼命安利下，我开始了自学React Native（以下简称RN）之路。其实对与RN有所了解，作为一个新兴的技术，受到非常多互联网公司的热捧。RN的一个宣传语就是Learn once，write anywhere。通过JavaScript来编写接近安卓原生的应用，而且对于IOS也同样适用，突然觉得会js又牛叉了好多。

这次主要分享跑通第一个RN应用的过程，一开始看教程觉得，按照教程来应该就挺快的，结果实际上是沿路碰到了各种问题，而且也不是很容易找到答案，所以这次就主要说问题好了。

首先，中文教程其实也不少，最终我选择了http://reactnative.cn上的教程，由于昨天手边就只有macbook pro，所以暂时就在osx上搭建的环境，后面一定会分享在win上搭配环境，毕竟主生产环境还是win。

先看教程地址：http://reactnative.cn/docs/0.41/getting-started.html

按照教程，先安装homebrew（mac系统的包管理工具），教程中说的安装权限问题在我这并没有碰到，不过也拿出来强调一下。原来自己安装过nodejs，当时是直接在官网上下载的pkg文件，所以在执行

       brewinstall node

的时候提示，已经安装过了，只是没有链接，而我自己也发现只有node命令可以用，而npm命令提示找不到。

所以我采用了卸载node，再用brew来进行安装。关于node的完全卸载，网上有这么一些命令，比如

sudo rm -rf/usr/local/{bin/{node,npm},lib/node_modules/npm,lib/node,share/man/*/node.*}

这样一句话，在终端中执行。实测有效，另外通过mac上的一个app，UninstallPKG这个软件，也可以很好地卸载以pkg安装的app，因为我当时安装nodejs的时候，就是从官网下载的pkg文件。

对于教程中的yarn和react-native-cli，我按照要求安装了，暂时没有深入研究，教程中提到的权限问题倒是碰到了，另外教程中所有代码关于‘whoami’这一块，替换成自己的mac用户名。

接下来就开始说要安装AS了，JDK1.8、Android Studio和Android SDK之前都已经安装过了，另外我一开始就打算真机调试的，所以并没有下载并创建模拟器，也没有下载X86的System Image。

按照教程配置好ANDROID_HOME环境变量，把SDK的tools也添加进去，这里一定要逐字地确认好没错，我当时少打一个s，结果SB地找了半天原因。

因为自己已经安装过Xcode了，所以git那一步就跳过了，并没有安装Nuclide，我平时自己用的就是sublime Text写非常简单的Js。

Genymotion，对于要用模拟器调试的小伙伴，可以安装一下，确实比AS自带的模拟器要好。

接下来就是激动人心的时刻了，按照教程中“测试安装”的部分，执行

       react-native init AwesomeProject

等了好久（配置了科学上网也要等），建立完成后会在/Users/用户名下出现AwesomeProject这样一个文件夹，通过执行

       cd AwesomeProject

进入该文件夹，在执行

       react-native run-android

的时候遇到了问题。

1， 先说小问题，如果不执行上面那句话，会提示run-android命令没有定义。

2， 另外，如果不在命令前加sudo，会提示项目路径下.gradle文件夹不存在（提示权限不够），所以执行命令之前一定要加sudo，以管理员执行命令。

3， 接下来又遇到了编译错误，提示SDK找不到，其实刚刚在配置环境变量的时候写了，为什么找不到呢，于是根据提示发现原来这个工程不像在AS里面一样会自动在android文件夹新建local.properties文本，所以我用sublime新建了这个文本，并在里面写了

sdk.dir=”SDK路径”

到这里，再执行上面的命令，开始自动下载gradle，好慢好慢的，，，，点点的打了一行又一行，终于下完了，竟然报错了，说什么session有问题，当时就蒙蔽了，这也行？！

经过一番寻找，最终在stack overflow上找到了答案，原来是我手机坑了，我是运行miui系统的红米4高配版，必须要在开发者选项里面关闭“MIUI优化”并重启，估计运行miui的手机都是这样，再次执行命令，编通了！

终于迈出了第一步，下一篇会分享在win上自己会遇到的问题，希望大家共同交流。