首页 » 前端开发 » 正文

在Windows下用AS搭建React Native Android开发环境【issues持续更新中】

写在前面

首先本文的目的是快速地在没有任何安卓开发经验的前提下,在windows上搭建React Native环境,同时本文假定读者已经具有了一些前端开发的经验(虽然所谓快速,请读者尽量保证半天到1天的时间)。网上其实已经有很多可以参考的文章,但是我的确在各种阅读的过程中和实践中遇到了很多奇奇怪怪的问题,本文也同时会描述这些问题,方便读者在搭建过程中进行相关的参考;同时本文会尽量详细地描述整个过程,方便参考。

本文同时会尽量减少不必要的操作步骤(官网给出的安装方式涉及到太多对于初学者来说不必要的东西,导致看起来门槛太高,当然,当你搭建起整个环境后可能需要去了解一下官网提到的各种技术)。

注意:本文最近会经常更新,以更正错误和整合更多更完全的信息,最近一次提交是2016.05.17

本文只针对windows下,使用Android Studio的IDE进行的相关开发环境配置(即使不是用Android Studio,本文同样具有参考意义,只是在最开始的配置部分可能会相对较为不同),其他环境请参阅文章尾部给出的附录信息。

Android Studio是一款基于IntelliJ IDEA的IDE,如果你使用过WebStorm/PhpStorm/CLion等JetBrains[1]公司的产品,那就不会对Android Studio陌生,因为IntelliJ IDEA是其下进行java开发的IDE。Android Studio 提供了集成的 Android 开发工具用于开发和调试,推荐使用。关于Android Studio的更多详细信息请参考附录2和3.

如果你基于根据某些已有的问题现象期望得到答案,请直接阅读“常见问题”部分。

开始搭建

因为是基于Android的,所以首先应该考虑搭建Android相关环境。

安装与配置JDK

Java官网下载JDK并安装。请注意选择x86还是x64版本:

  1.  勾选Accept License Agreement(接受许可协议)
  2. 点击具体需要下载的文件(一般在windows上都是X64)

jdk安装

如果不接受许可协议的话,是不会让下载的。
安装完成后,一般推荐将JDK的bin目录加入系统PATH环境变量,不过因为他不影响整个流程,所以此处不进行这步操作。

 

安装与配置Android Studio

1.安装Android Studio

注意:安装Android Studio主要在于方便一键集成Android SDK等,如果不想安装Android Studio,也可以参考附录9或者附录6的官方文档部分,但是他们都额外安装了很多看起来比较烦人的东西,较为麻烦,不适合新手进行快速安装。

推荐从Android Studio中文站–下载专区下载,如果此链接失效,请从附录3中给出的链接中进入。

请务必参见下图下载EXE-BUNDLE版本,该版本大小约1.13G,除了标准的Android Studio,还包含了Android SDK等内容,所以就不需要安装其他额外的内容了:

Android Studio下载

 

安装完成后,Android SDK也就已经成功地安装到本地了。

2.配置ANDROID_HOME

此时需要进行以下配置:

  1. ANDROID_HOME加入到系统环境变量(如果不知道如何新增环境变量请自行百度),ANDROID_HOME需要指向Android SDK目录,如果你是按照文章描述的内容通过Android Studio集成,其位置应该是
    C:\Users\Administrator\AppData\Local\Android\sdk
  2. 编辑系统环境变量PATH,加入以下位置
    ;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools

注意,Android Studio可能需要重启之后才能够正常识别新增加的字段。

注意:如果你按照附录9的方式安装了,但是出现了一些错误,请检查是否配置了ANDROID_HOME这个环境变量。

 3.设置SDKManager

打开Android Studio后,你可以通过以下任意方式进入SDKManager:

  • 在Welcome界面选择Configure->SDK Manager
  • 在主界面左上角File->Settings,从左上角的搜索输入sdk,其定位到的位置(或者直接点击Appearance & Behavior ->System Settings->Android SDK
  • 如果你已经打开了一个安卓项目,可以从主界面的Tools->Android->SDK Manager进入
  • 你也可以在命令行里边输入android来打开,其界面和在Android Studio里边看到的差不多

以上几种方式的截图如下(其最终看到的效果如下图中从File->Settings进入是一致的):

从欢迎进入

从Welcome界面进入

 从File->Settings进入

从File->Settings进入

从已有的安卓项目进入

从已有的安卓项目进入

 

 

进入该界面后,在右侧的选项卡中切换到SDK Tools选项卡(参见上图中“从File->Settings进入”的绿框部分)。

等待若干秒后,检查以下项目是否已经安装到最新(默认情况下有未安装的部分,请仔细检查以下项目):

  • Tools/Android SDK Tools (24.4.1)
  • Tools/Android SDK Platform-tools (23)
  • Tools/Android SDK Build-tools
  • Android 6.0 (API 23)/SDK Platform (1)
  • Extras/Android Support Library(23.2.0)
  • Local Maven repository for Support Libraries(之前叫做Android Support Repository)

如果下载速度太慢,或者更新列表中根本找不到以上的所有项,请参考附录4进行相关配置。(注:实际测试发现,在未翻墙的情况下很容易出现该问题)

安装Python

请从官网安装python 2.7.x的版本,请不要选择安装3系列版本(目前不明确python 3是否OK)。

小提示:

  1. python安装完成后,可以在命令行中自行python –version查看当前版本号
  2. 在windows的命令行中,需要打开新的命令行窗口才能对新的相关设置生效,如果执行python –version出错,请重新打开命令行窗口试试
  3. 如果安装了python(默认应该是在C:\Python27)但是在执行1.时提示找不到python,请将python安装路径加入到path环境变量中

 

安装NodeJs

官网下载node.js的官方4.1版本或更高版本。笔者手上安装的是node 5.6.0。

可以设置npm镜像以加速后面的过程(或使用科学上网工具)。

npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist

安装react-native命令行工具

npm install -g react-native-cli

创建项目

进入你的工作目录(笔者工作目录是G:\TestDemo),运行

react-native init MyProject

并耐心等待数(或数十)分钟,此时会生成一个MyProject的目录作为我们的项目目录(本文后面所说的“项目目录”均指该处提出的目录)

Android Studio配置与真机运行

此时,请插入你的安卓手机,并选择允许本机进行调试,如果没有看到类似的对话框,请进入设置-辅助功能-开发人员工具中开启USB调试,并推荐信任该计算机,之后则无需进行该项操作。(此处如果出现问题,请参考本文的“常见问题”部分)

在Android Studio中,通过File->New->Import Project选中刚才的项目目录下的android文件夹,对于本文的例子,也就是G:\TestDemo\MyProject\android。注意,一定是选中android文件夹,不能是我们的项目目录。加载成功后,能够看到顶部菜单是有区别的:

被识别成Android工程之前的菜单项

被识别成Android工程之前的菜单项

被识别成Android工程之后的菜单项

被识别成Android工程之后的菜单项

点击右侧的安卓小人能够看到当前已经识别的安卓设备,比如笔者的魅族MX4显示如下:

识别的设备名

识别的设备名

 

首先,如果你跟我一样使用的是真机,请先在命令行中执行

adb reverse tcp:8081 tcp:8081

注意,这句话的执行结果是,能够让连接到该电脑的手机上能够正常访问,如果你不执行这句话,也可以后面在手机上设置远程调试IP和端口,详细内容可以参考文章中后面常见问题部分的
真机跑时报错:ReferenceError: Can’t find variable: __fbBatchedBridge》
。换句话说,即使不用手机连接电脑,也可以进行调试。
然后,在项目目录中运行

react-native start

可以用浏览器访问http://localhost:8081/index.android.bundle?platform=android看看是否可以看到打包后的脚本。第一次访问通常需要十几秒,并且在packager的命令行可以看到进度条。注意,此处说的是项目目录,如果你已经使用Android Studio按照上面的步骤进行了操作,那么你需要在G:\TestDemo\MyProject下执行react-native start。

图中点击左侧的三角形按钮,选择设备确认后稍等数秒到数十秒后即可在真机上运行APP了。

运行完毕后可以在真机上看到应用自动启动了。注意,笔者的手机在启动后出现了白屏,此时请在安全中心里看看是不是应用的“悬浮窗”的权限被禁止了,之后就能正常地看到跑出来的界面了。

至此,整个过程结束。

关于react-native run-android

许多参考资料都给出了最后运行的一步,就是

react-native run-android

由于我们使用Android Studio,是可以直接跳过这一步的,但是如果你更倾向于用命令行的方式,在执行完react-native start之后,新开一个窗口执行react-native run-android即可。

第一次在运行时会下载gradle相关依赖,会花费不少时间,这之后就大约10多秒到几十秒的时间即可。在这个步骤中可能会遇到问题(目前多个同学都遇到了相同的问题),请参见常见问题部分。

 

 其他

该文在编写过程中参考了许多资料,包括附录5-9,读者遇到问题后也可以到这些附录中寻找答案。

 

常见问题

为什么很多教程提到了安装Android Support Repository,但是压根找不到?

Android Support Repository 已经改名为Local Maven repository for Support Libraries,所以在一些比较老的资料上还能看到这个名词存在。

 

执行react-native start后报错:Command `start` unrecognized. Did you mean to run this inside a react-native project?

一般是因为没有进入到react-native工程中,如果读者初始化的项目和本文一致,请进入My Project目录后再执行该命令。

 

真实设备上白屏,没有报错

请在安全中心里看看是不是应用的“悬浮窗”的权限被禁止了(在笔者手机上,默认是被禁止的)

 

真机跑时报错:ReferenceError: Can’t find variable: __fbBatchedBridge,见下图

安卓异常

安卓异常

  • 可能是因为没有正确执行react-native start,执行后在界面上点击ReloadJs(或者晃动手机后选择ReloadJs);
  • 如果手机和电脑是连接上的,可以执行以下命令:

adb reverse tcp:8081 tcp:8081

 

找不到android-sdk环境变量

请参见“安装与配置Android Studio”章节关于ANDROID_HOME环境变量的配置,也可以在项目目录下新建一个local.propertites文件,添加sdk.dir=你的android的sdk目录

 

no resource found that matches the given name ‘theme.appcompat.light.noactionbar’

请确认是否是在项目目录下的android文件夹中导入的工程,如果不是,请按此操作。

*注意,关于这个问题网上有很多回答,但是针对React Native的初始包里边出现了这个错误,目前应当只是这个错误导致的,试图修改任何文件可能并没有什么帮助。笔者在遇到这个问题时查阅了各种资料,进行过各种尝试都以失败告终,最后发现其实只是因为导入工程的时候没有正确导致项目目录下的android文件夹而已。

 

Android Studio连接真机没反应

如果已经在手机上设置允许调试之后,还是有问题,请检查是否有相关的USB驱动。请注意,即使没有该驱动,手机也能够正常识别并进行拷贝文件等操作,此时在计算机,右键,管理里边能够看到有一项USB的是有惊叹号的。此时可以下载驱动人生/驱动精灵/豌豆荚等,安装完成驱动后,能够看到下图展示的“允许USB调试”界面,确定后即可。如果还是不能成功,请参见知乎上的回答

允许调试

允许调试

 

react-native run-android报错:app:installDebug FAILED

问题1:
:app:installDebug FAILED
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':app:installDebug'.
> com.android.builder.testing.api.DeviceException: com.android.ddmlib.InstallException: Unable to upload some APKs
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.
BUILD FAILED

 

遇到这个错误后,能够看到项目目录下android/app/build/outputs/apk/下是生成了2个apk文件的,问题其实出现在上传到设备时出现了问题。

有以下2个解决方案(推荐方案2):

    1. 手动拷贝生成好的app-debug.apk到手机上并安装,安装好后如果白屏记得在安全中心里看看是不是应用的“悬浮窗”的权限被禁止了,其他错误请参考本文的“常见问题”部分
    2. 打开项目目录下的android/build.gradle ,将gradle的版本号改为1.2.3,当前笔者手上默认是1.3.1,然后重新执行react-native run-android. 修改如下图所示:
降级gradle到1.2.3

降级gradle到1.2.3

对这块降级的细节有兴趣的同学可以参考一下github上的相关讨论

 问题2:
* What went wrong:
Execution failed for task ':app:installDebug'.
> com.android.builder.testing.api.DeviceException: com.android.ddmlib.InstallException: Failed to finalize session : 
INSTALL_PARSE_FAILED_INCONSISTENT_CERTIFICATES: New package has a different signature: com.myproject

这个问题是由于新的包和已有的老的包不是同一个前面(但是是同一个文件名)导致的。笔者遇到的这个问题的情况是,在公司电脑建立了一个MyProject的工程,然后打包到手机上,然后在自己电脑上建立了同样的工程,在打包时出现了这个错误。

 

Uncaught error Error:…\node_modules\react-deep-force-update\.babelrc.stage

请直接删除 ./node_modules/react-native/node_modules/react-transform-hmr/node_modules/react-proxy/node_modules/react-deep-force-update/.babelrc文件,如果读者对细节有兴趣,可以浏览github上的讨论

 

开启热加载时报错:Requiring unknown module “./..\..\node_modules\react-native\node_modules\react-transform-hmr\lib\index.js”. If you are sure the module is there, try restarting the packager or running “npm install”.

hmr exception

在windows上可能会出现该问题,是因为在路径上斜杠(/)和反斜杠(\)导致的问题,这个问题需要rn和babel-preset-react-native这两块修改,而rn在0.24修复了这个问题,babel-preset-react-native上大约1.5.7修复了这个问题,但是笔者更新到最新发现还是有问题,下面提供问题的临时修复方案:

  1. 找到你的工程目录下的node_modules/babel-preset-react-native/configs/hmr.js,在return语句之前增加一行修改以下代码(如果已有该代码,请保持不动):
    if (path.sep === '\\') {
        transform = transform.replace(/\\/g, '/');
    }
    
  2. 找到你的工程目录下的node_modules/react-native/packager/react-packager/src/Bundler/index.js,查找是否有 filePath = filePath.replace(/\\/g, /),如果没有,请将rn升级,或者参照这里进行修改
  3. 执行npm start — –reset-cache

如果以上方法无效,请将第一步的if (path.sep === ‘\\’) {和末尾的}去掉,只保留transform = transform.replace(/\\/g, ‘/’);

 

安卓设置动画(eg: LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);)后没有看到任何动画效果

请添加当前行:

UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true);

在安卓+WIN环境上出现DEBUG时报错:unable to connect with remote debugger

  1. 打开android/build.gradle文件,查找allprojects,看看是否是以下代码:
    allprojects {
        repositories {
            mavenLocal()
            jcenter()
            maven {
                // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
                url "$projectDir/../../node_modules/react-native/android"
            }
        }
    }
    

    注意重点是maven{}这几行

  2. 执行react-native run-android命令重新打包。

如果以上步骤不能解决问题,你可以参加这里的讨论,或者看一下是否有其他方案

需要设置JAVA_HOME

部分电脑上会在打包时出现要求设置JAVA_HOME环境变量的问题,如果读者遇到了这个问题,可以设置一下这个环境变量,需要指向到JDK的根目录,例如笔者的目录位于D:\Program Files\Java\jdk1.7.0_25。如果没有出现这个问题,请直接无视掉,设置细节可以参考百度经验

附录

  1. JetBrains官网
  2. Android Studio简介–百度百科
  3. Android Studio 中文站
  4. 使用腾讯Bugly的镜像加速下载
  5. React Native Android 踩坑之旅
  6. 官方:Getting Started
  7. 开始使用React Native(官方文档中文翻译)
  8. React Native For Android初体验
  9. 在Windows下搭建React Native Android开发环境

发表评论