react-native 浅尝之

Z时代
2024-01-10
分类：综合

react

此图确实描述了我学习过程的抓狂！

经过反复的尝试和对错误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 IOS 和 ro 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 出现了下面的错误