之前一直是主攻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上自己会遇到的问题,希望大家共同交流。