初步学习React Native
之前学习了混合式开发框架IONIC,发现这个上手很快,因为大部分控件框架中都有提供了,然后看到了React Native ,它充分利用了Facebook的现有轮子,是一个非常优秀的集成作品,而且现在适用性来说,React Native 是比 IONIC 更广为人知的,所以这里打算开始学习下,一方面可以拓展自身的知识面,另一方面学习的过程中也可以将 它们两者进行一个对比,从中选择更适合自己的开发方式。
这里先推荐两个学习网址:
第一个毫无疑问是官网了,第二个是React Native中文学习网站,里面有对官网的翻译,也有一些额外的教程。
搭建环境:
学习之前必然要先搭建运行环境了,由于我之前学习 IONIC ,一些基本的环境已经搭建好了,这里就不再描述,详细的可以查看上面推荐的中文学习网站,里面已经写得十分详细了。
生成并运行项目
在node.js中输入下面的命令操作:
**react-native init AwesomeProject
cd AwesomeProject
react-native run-android**
这里如果你比较幸运的话就可以在手机上看到运行效果了,当然往事开头难,一开始难免会遇到各种各样的问题。
问题一:
Unable to load script from assets ‘index.android.bundle’……
这个问题的关键在于缺少了 index.android.bundle 这个文件,然后各种百度也说是在android目录下缺少了assets文件夹,然后没有生成对应的index.android.bundle这个文件,然后网上给出的解决方法如下:
第一步:在Android/app/src/main目录下创建一个空的assets文件夹,
第二步:进入项目根目录执行下面代码:
react-native bundle –platform android –dev false –entry-file index.android.js –bundle-output android/app/src/main/assets/index.android.bundle –assets-dest android/app/src/main/res/
但是你在输入上面这串代码的时候会发现还是报错,因为项目里面根本没有所谓的 index.android.js 文件,下面是这个项目的根目录:
这时候又各种百度这个文件是什么,然后有人说了新版本没有了index.android.js 和 index.ios.js ,整合到了App.js 里了,一看目录的确有一个 App.js 的文件,抱着试一下的心态,我将上面的 index.android.js 换成了 App.js :
react-native bundle –platform android –dev false –entry-file App.js –bundle-output android/app/src/main/assets/index.android.bundle –assets-dest android/app/src/main/res/
的确在assets目录下生成了两个文件,这时候心里一阵狂喜,终于搞定了,然后满怀激情的输入了, react-native run-android, 结果出乎意料又在情理之中的还是报错了,好吧果然没有什么事可以随随便便成功。既然bug出现了,那就只能去解决了。
bug如下:
然后又是各种百度(原谅我,最近敏感时期,梯子都不好用了),结果试了各种所谓的解决方法还是没有任何效果,在我即将心灰意冷的时候突然想到会不会是我上一步就出错了,assets生成的文件本身就是错的。之后我再目录里面仔细的搜索,又发现了一个 index.js 文件,想到已经没有什么其他办法了,只能重新尝试一下了,于是乎我把第二步的命令行改成了下面这个:
react-native bundle –platform android –dev false –entry-file index.js –bundle-output android/app/src/main/assets/index.android.bundle –assets-dest android/app/src/main/res/
只是将其中的 App.js 替换成 index.js ,运行后发现是可以的,也有生成对应的文件,再运行下 react-native run-android 发现竟然可以了。简直要喜极而泣。终于把项目跑起来了。
第三步:重新运行后就可以了。
这里将问题记录了下,一方面是自己可以查看,另一方面也希望能帮到其他人少走弯路。