Window RN 踩坑之旅—环境搭建

一、什么是RN

RN 是React Native 的简称,是由 FaceBook 推出的一款跨平台开发框架,在2014年年底开源出 IOS 版本,2015年9月15又推出 React Native for Android 版本,至此可以说是真正的成为跨平台的客户端框架

随着跨平台的流行,RN 自然而然就火爆了起来,FaceBook 推出时官方说法 learn once, run everywhere ,即除了移动的 Android 、IOS ,在 Browser 中都可以运行,因为 RN 这套框架可以用JS来构建跨平台应用,JS在运行时可以动态加载,从而理论上是可以做到,wirte once, run everywhere, 既然是理论,那就免不了可能还要做一些适配工作,RN 就介绍这么多吧,那些啥高大上原理咱也不太懂,毕竟我也刚玩,这篇主要就是介绍如何在 window 搭建 Android 的 RN 运行环境,想详细了解的话,网上一搜一大堆,还比我写的好。

二、环境配置和参考资料

RN 的官方地址
RN 的 Github 地址
RN 的中文社区地址

2.1、我自己的系统环境
  • OS : win7
  • JDK 8
  • AndroidStudio 2.2
2.2、所需软件或工具
  • Node.js
  • Python (注意按照官方提示请安装 Python 2.x 系列的)
  • AndroidStudio 2.x版本及以上
  • Android SDK (16以上越多越好,嫌费事就下载 23.0.1 及以上的版本其中主要下载SDK ,SDK-tools 还有最底部的 Android Support Repository,这里我多说两句,因为在这吃了不少亏,首先最新版 RN 是 0.56 ,所需要的SDK 版本是 26,这个版本很闹心,我试了很多次就是无法运行,最后将 RN 降级到 0.50.0 才成功,0.50.0 所需的 SDK 版本是23)
  • JDK 1.8 暂时不支持更高版本而且 Studio 也需要 1.8 版本
  • Git 版本控制(可选)

除了这些,运行的时候你还需要一个Android手机要不然怎么玩没有的话也没关系,你可以用 AndroidStudio 自带的模拟器,或者安装 SAMSUNG 的 Genymotion,教程网上有。

2.3、环境变量配置
  • adb 环境变量这个一般配置到 SDK目录下的 platform-tools 路径即可
  • JDK 环境变量,这个我就不多说了
  • SDK 环境变量,就是将 SDK 全路径配置到系统中
    这里写图片描述

    目录结构,其中 android 目录就是一个标准的 android 项目,可以直接导入 AndroidStudio 运行

    这里写图片描述

    激动人心的时刻到来了,让我们运行起来,执行以下命令运行 android 项目

    • react-native run-android

    这里写图片描述

    在 AndroidStudio 下载完 26.0.3 版本之后,我又执行了一下 react-native run-android 命令,成功安装 Apk

    这里写图片描述

    配置地址和端口

    这里写图片描述

    当然啦我运气一直不太好,所以出现了如下界面,啧啧,看看这满江红,虽然有点膈应但我也不是吓大的,有错就改嘛,于是我陷入了疯狂的 百度+Google 模式

    这里写图片描述
    你这特么报的哪门子空指针无奈我只好再次 百度+Google 经过一段时间搜索,发现这个问题比比皆是,大致两种解决方式
    • 删除 android 目录下的 .gradle 文件,但我找了半天并没有发现这个文件,这个文件只有在导入 AndroidStudio 中才会生成,问题我都导入到 AndroidStudio 中了,还用得着命令行/li>
    • 对 npm 降级,因为 npm5.x 版本及以上存在安装新库时会删除其他库的问题,导致项目无法正常运行。我查了下我的 npm 是 4.6 ,然并卵,该空指针还是空指针

    很明显此路不通或者说我道行不够,那怎么办凉拌呗,开个玩笑,最终我将项目导入 AndroidStudio 运行,虽然我很想用命令行的方式运行,但老是报各种报莫名其妙的错,让我觉得没必要跟自己过不去,毕竟我不想砸电脑,讽刺的是用命令行虽然错误百出,但导入 AndroidStudio 后我连一个 warning 都没看到,这种剧烈的反差不禁让我觉得,偏执的用命令行的我像个傻逼一样。

    导入后我直接开始运行,那熟悉的感觉让我终于回想起我特么是个 Android 开发,安装,启动 Apk ,一气呵成,都不用我动,就是这样……….嗯好像哪里不对,等了四五秒怎么一直白屏等了一会还是白屏,然后控制台给我报了一堆这个玩意!

    这里写图片描述

    只能再次百度+Google ——终于我找了一个解决方案,首先在 androidappsrcmain 目录下创建 assets 文件夹,然后在命令行执行以下命令

    成功后会在 assets 目录生成两个文件夹,如下所示

    这里写图片描述

    至此,搭建环境的踩坑之旅暂时告一段落,而且这只是万里长征的第一步而已! 还有,RN 的搭建是真的费劲! 希望 FB 能慢慢改进吧,当然也可能是我太菜了!

    四、结语

    总算写完了,写博客有的时候还真是个体力活,不过能把这些错误记录下来还是值得的,不仅自己以后方便查阅,也能让别人少走点弯路,所以感觉还不错,不过说到这里我在补一个小插曲

    • unable to load script from assets ‘index.android bundle’ ,make sure your bundle is packaged correctly or youu’re runing a packager server

    上面这个异常是在 RN 0.50.0 版本时 apk白屏的时候报的 意思是无法加载 js 脚本,于是我就想最新版 0.56 的满江红的时候控制台是不是也报这个错后我打开了 RN 0.56 版本的 Apk 在 AndroidStudio 控制台查看 log 信息,果不其然还真的报了这个错误,当时我内心一动,这岂不是说如果我用 3.4 小节中的那个很长的命令行是不是也能解决这个问题,于是我兴致勃勃的试了一下,然并卵,一点用都没有,还报了一堆错。不过我已经懒得查了,留给有缘人吧,我真的被最新版坑的精疲力尽了。

    而且这个错误的出现是有原因的引用另一位博主的话吧

    这个index.android.bundle毫无疑问就是用来调用原生控件的js脚本,每次当你改变了 index.android.js,你都需要使用上面的代码片段,来及时的更新index.android.bundle,然后打包才可以把新的index.android.js应用上,所以当没有index.android.bundle文件时,RN是无法运行的.

    参考博客
    https://blog.csdn.net/u014175342/article/details/73823904

    来源:澜秋

    声明:本站部分文章及图片转载于互联网,内容版权归原作者所有,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢!

上一篇 2018年6月22日
下一篇 2018年6月22日

相关推荐