react-native 浅尝之

前端之家收集整理的这篇文章主要介绍了react-native 浅尝之前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

此图确实描述了我学习过程的抓狂!
经过反复的尝试和对错误log的解读、搜索解决处理,最终成功编译出了第一个Hybrid-App。效果这样的:

当然这里我不是在讲解或者去描述它的编译过程。因为这些在官网或者网络上是很多的,不妨看看这些

该博文内容基于Windows系统,针对Android系统下的APP-参考:
官网的Reat-Native环境搭建和测试安装
腾讯的一个关于Reat-Native的教学视频
通过对她们的仔细学习,应该是没什么大问题!但是也不是绝对的。。对于新手来说,有可能每个问题都是致命的。但是都是能通过学习来解决问题的!

现在最新版的react-native-cli命令从创建一个项目到编译命令只有
react-native init XXProject
cd XXProject
react-native run-android
现在简单展示一下,通过react-native-cli命令创建并编译执行一个app的过程效果
而对于一个正常的操作和反馈的过程是这样的
使用命令react-native init XXProject 效果展示

此过程不会出现什么错误,只有零星的几个警告 效果展示

使用命令react-native run-android 效果展示

当前过程,当你成功创建的Project所需要的gradle目录中没有其压缩包,则会自动去下载gradle-2.14.1-all.zip ,之前自动下载的它,有问题,然后我就到gradle官网下载了一个一模一样的并放到它原要求的目录下,但是当我执行react-native run-android 的时候还是会自动去下载(或许是我个人特例)。直到最后下载成功之后,便自动安装到手机上,效果展示

这篇博客的写作目的是来分享一下我学习过程中遇到的react-native问题!
IMPORTANT:执行init 或者 run 命令的时候,尽量多执行几次,避免由于网络原因造成不必要的执行失败,并让你认为是自己的问题;并且,这两个执行过程是很慢的,要有心里准备哦!
比如,我第一次执行init,意外的出错!!但是我再次执行,又正确了!看下错误效果

执行命令react-native init 出现了好多你在我上面没有见到过的WARN警告,或者最后没有出现
to run your app on IOSro run your app on Android 这两句话。
说明你的init有问题,请查看您的环境配置。
比如,我把SDK的环境故意给配置错误(注:我的正确SDK环境配置是在用户变量中进行配置的)然后出现了预知的错误

然后会出现错误的误导,让你执行命令npm install(之前的老版本是要执行它,但是现在从官网上看是不用的),误导效果

执行命令react-native run-android 出现了下面的错误

这里说明了,对于你已经下载过的 gradle-2.14.1-all.zip 文件是损坏的。你只需要找到它所对应的目录,重新下载。

执行命令react-native run-android 出现了下面的错误

这里说明了,对于你已经下载的 gradle-2.14.1-all.zip 文件需要重新下载,不对!因为我已测试,删除损坏的并使用重新下载的完整且正确gradle-2.14.1-all.zip之后,再次执行上面命令,能正常执行并安装到手机上!!

执行命令react-native run-android 出现了下面的错误

走到这里说明你的各种配置已经没有问题了,只是你手机上存在一个使用react-native装载了的app,卸载之前的app并摇动手机reload就好了!

总结起来,如果按照上面做基本的配置,比如下载安装、npm的配置等,自己觉得都弄好了,那么在react-native init 时候出现了好多警告问题并且react-native run-android的时候老不成功、出错。这时,你需要仔细排查一下你的SDK环境gradle了。

猜你在找的React相关文章