您的位置：首页 > Web前端 > React

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

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

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

搭建环境前的准备

开始安装react-native

创建react-native项目

运行react-native项目

搭建环境前的准备

JDK1.7+

Android SDK

Git

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)。


运行这个会启动一个本地8081端口的web服务

我在启动这服务的时候就遇到了ERROR Watcher took long to load，不用去安装watchman，按照上面的把超时时间改长就正常了。

如果连接不到dev server的话


Android
对于Android 5.0以上设备，你可以运行
adb reverse tcp:8081 tcp:8081
来使得你的设备可以访问到你的电脑。


如果运行了还是不行，你只有把启动dev server服务再尝试下，找找问题了，比如8081端口被占用等。



启动到上图红线部分的位置dev server就是启动成功了，红线下面的是模拟器或者真机加载成功出现的。

启动了这服务可能还是那个红色界面的提示，因为必须要保证开发PC和模拟器或真机里的安卓系统在同一个局域网才能访问正常

出现那红色界面，摇晃设备或按Menu键，可以打开调试菜单，点击Dev Settings，选Debug server host for device，



输入你开发机的局域网IP+8081端口，再按back键返回，再按Menu键，在调试菜单中选择Reload JS，就应该可以看到运行的结果了。



选择Debug JS，在安装了React Developer Tools的情况下，就可以在Chrome下调试应用，但是看不到界面。

参考资料：

http://react-native.cn/docs/getting-started.html

/article/4754883.html

https://github.com/yipengmu/react-native-android-lession

本文地址：/article/5267386.html

欢迎加群：182659848 一起讨论
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航