React Native开发经验集React Native开发技巧

window下搭建react-native for androi

2017-04-09  本文已影响0人  张大娃创业笔记

前言

最近我也开始入坑react-native的学习开发,我在这里总结一下我window搭建react-native for android的过程,之前也没有做记录,我只能把配置过程写个大概,如有其他问题可以反馈评论,如文章有误欢迎指正!

1.安装node.js

node.js官网下载对应的32位或64位.msi格式版本一路默认安装即可!安装完成后可以点击(开始——输入cmd回车)进入命令行工具,执行(node -v ——回车)验证node是否安装成功,执行(npm -v——回车)验证npm是否安装成功。

无标题.png

2.安装jdk

Java官网下载JDK并安装。请注意选择x86还是x64版本。
推荐将JDK的bin目录加入系统PATH环境变量;略过详细安装步骤。

1.png

3.安装android sdk

我这里是单独安装的sdk,我的电脑配置低安装android studio的话开发起来太卡,所以我是单独安装sdk+visual studio code来进行开发的;为了sdk加速下载,推荐从AndroidDevTools下载sdk tool安装:

3.png

然后进入SDKManager(可通过Android Studio菜单Tools-Android-SDK Manager),确保以下项目已经安装并更新到最新:
Tools/Android SDK Tools (24.3.3)

Tools/Android SDK Platform-tools (22)

Tools/Android SDK Build-tools (23.0.1)(这个必须版本严格匹配23.0.1)

Android 6.0 (API 23)/SDK Platform (1)

Extras/Android Support Library(23.0.1)

Extras/Android Support Repository

推荐使用腾讯Bugly的镜像加速下载。查看说明
推荐将SDK的platform-tools子目录加入系统PATH环境变量。
最后,把ANDROID_HOME环境变量设置为你sdk所在目录。

4.安装c++环境

安装visual c++ 2015运行库,编译node.js的C++模块时需要用到。


4.png

5.配置npm

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

npm config set registry https://registry.npm.taobao.org --global

npm config set disturl https://npm.taobao.org/dist --global

6.安装react-native命令行工具

npm install -g react-native-cli

7.创建你的项目

创建一个空文件夹(不要创建在c盘的adminstrator下会受到各种限制,最好在其他盘创建一个存放项目的文件夹就可以了),执行cd xxx进入目录,然后执行:

react-native init MyApp

init完成后,cd MyApp进入项目目录,执行:

npm install

安装相关依赖。

8.安卓真机运行

执行命令:

react-native run-android

编译完毕后就会在通过usb连接电脑并开启调试模式的手机上运行了!
这里需要注意三个问题:1.不知道自己的手机是否已经连接电脑了吗,执行命令:

adb devices

查看是否存在设备,如图(2486070就是我的设备):

5.png

或许有人会遇到下图这样的错误:


6.png

这是因为端口被占用了,只支持一个设备链接,看看你电脑是否存在手机助手,关闭运行或者卸载就可以了。
2.初次运行成功后,你或许需要修改代码看看效果,可以使用wifi同步调试,手机端按下菜单键或摇一摇选择Dev Settings然后点击下图标注输入你的ip地址+8081(如127.0.01:8081)

365257057689525849.jpg

修改代码后手机端选择Reload重新加载就能看到效果了


21583419650850959.png

这里需要主要一个问题:需要保持packager的运行,不然无法请求渲染,每次在执行react-native run-android编译的时候都会自动开启,如果没编译处理查看修改页面代码效果时需要开启packager,方法在第9。

3.初次执行react-native run-android时需要下载一个gradle-2.2-all.zip你会发现很慢或者被墙了,可以直接下载到本地(地址:gradle-2.2-all.zip)然后打开项目android/gradle/wrapper/gradle-wrapper.properties文件修改代码:

distributionUrl=file\:///D:/reactapp/gradle-2.2-all.zip //你本地zip存放地址,注意有一个反斜杠\哦!

然后编译你就会发现很快。

9.运行packager

执行命令:

react-native start

可以用浏览器访问http://localhost:8081/index.android.bundle?platform=android看看是否可以看到打包后的脚本(看到很长的js代码就对了)。第一次访问通常需要十几秒,并且在packager的命令行可以看到形如[====]的进度条。

10.安卓调试

打开Chrome,访问http://localhost:8081/debugger-ui,应当能看到一个页面。按F12打开开发者菜单。
在模拟器或真机菜单中选择Debug JS,即可开始调试。

11.更快速的搭建方法

读到这里或许很多人觉得搭建这个react native开发环境也太复杂了吧,有没有更快捷简单的方法呢?
这里做其他介绍了,直接分享一个链接给大家:更快速的 React Native 应用开发之道

好了暂时写到这里吧,完成上面的步骤应该可以搭建好开发环境了,后期如果想到需要阐述的再继续修正,遇到有不对的或这上面没提到的问题可以反馈评论!

上一篇下一篇

猜你喜欢

热点阅读