react-native for android windows开发环境搭建详细记录

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

react

先说说整个环境搭建的过程。上周开始要在windows上搭建react-native for android环境，当时按照找的教程，从git上clone master分支的代码，然后下载了node，安装react-native框架还是很顺利的。

导入到android studio上就无法构建，找找了找原因没有解决，折腾了1天没解决，在这之后也遇到很多问题，搭建过程还是比较曲折的，折腾了好几天才弄好。下面是我的详细安装过程。

搭建环境前的准备

开始安装react-native

创建react-native项目

运行react-native项目

搭建环境前的准备

JDK1.7+

Android SDK

Nodejs4.0+

开始安装react-native

JDK安装，注意要配置环境变量，这里就不细说了。

注意一下，Git是必须安装的。因为后面需要通过Git来执行一些命令。比如：windows下dev server目前是不会自动运行的，需要执行react-native start启动，

Windows上安装Git for Windows。在安装过程中，请务必记得勾选Run Git from Windows Command Prompt，

这样会把Git的可执行程序加入到PATH环境变量中，这样其他程序才能在命令行中正确调用Git。

我的Git是以前安装的，没有配置环境变量，比如：

D:\Program Files\Git\bin;D:\Program Files\Git\libexec\git-core;

把这两个路径加入到环境变量Path里就可以正确调用Git

Android SDK的安装需要最新的安卓6.0的SDK。下载被墙，可以使用腾讯Bugly的镜像来加速下载。

Git的安装不说了。

Nodejs的官方源下载有些慢，可以使用淘宝的源。

打开windows的命令行界面使用命令

npm install -g nrm

nrm可以很方便切换源

nrm安装好后，可以使用命令

nrm ls

查看源列表

像这样使用命令

nrm use taobao

就可以切换到淘宝的源。

然后执行

npm install -g react-native-cli

安装react-native-cli，就可以使用react-native命令。

我是使用的最新发布版本0.17rc版，安装会下载一些文件，没有出现什么问题

创建react-native项目

进入你要放置项目的目录然后执行命令

react-native init RNApp

这样就会创建一个RNApp的react-native的项目，创建的过程有些慢，回去下载Gradle依赖，创建完目录会出现如下目录结构

运行react-native项目

然后我就把安卓的程序导入android studio(不导入也可以运行，先说说我的过程)，因为之前我本地没有安卓sdk 23版本，所以编译运行直接提示错误,找不到sdk 23，

然后我就手动的去修改sdk版本为已有的sdk 18版本（不符合react-native运行要求肯定出错，需要sdk 23版本，也就是安卓6.0 sdk），出现以下错误

这个提示的是build.gradle里错误，build.gradle在项目中有两个，一个是App根目录下的，另外一个是App下Gradle文件夹下的。好像是android studio自动改变了结构，

这里没有之前的结构图，下面是我现在的结构图

我手动在android studio设置sdk，IDE自动在build.gradle(Project:RNApp)文件里加入了安卓版本等配置，结果就导致错误，提示的build.gradle(Project:RNApp)里的。

后面我把sdk 23安装好了，还是一样提示错误，后来在stackoverflow上找到原因了，

In your top level build.gradle you seem to have the code
android
{
　　compileSdkVersion 19
　　buildToolsVersion "19.1"
}
You can\'t have this code at the top level build.gradle because the android build plugin isn\'t loaded just yet.
You can define the compile version and build tools version in the app level build.gradle

就是说在build.gradle(Project:RNApp)里规定sdk版本也不会起作用，需要删除这里的sdk版本配置，build.gradle(Module:App)里面本来就有sdk配置

删除后程序终于可以编译了。

现在说说不用android studio直接用命令运行react-native程序，在工程目录下运行命令

react-native run-android

至此，应该能看到APP运行，并报错 Unable to download JS bundle（android studio里运行也一样）

这个是由于windows上的工程不会自动启动dev server

这里引用翻译的React-Native中文文档的内容

在Windows平台上，在你运行react-native run-android之后，packager不会自动启动。你需要这样自行启动它：
#对于React Native版本 < 0.14的
cd MyAwesomeApp
node node_modules/react-native/packager/packager.js
#对于React Native版本 >= 0.14的 (这个版本移除了packager.js)
cd MyAwesomeApp
react-native start
如果你碰到了ERROR Watcher took too long to load的报错，请尝试将这个文件中的timeout值改得更大一些 (文件的具体路径是node_modules/react-native/packager/react-packager/src/FileWatcher/index.js)。