在Windows下安装ReactNative

字数 1967阅读 1084

写在前面,这个仅仅是记录一下我在windows下安装ReactNative遇到的问题,和解决的办法

一、准备工作

1、安装 Nodejs

这里是nodejs的官网,直接下载安装即可

注意以下几点

  • Nodejs安装的时候有个选项是添加到环境变量,别去掉,大部分情况是用命令行的。一路next侠可以忽略。假如安装完以后发现npm命令不用,记得添加环境变量即可。
  • 如果是公司网络可能安装好以后需要设置代理。nodejs的设置方法:npm config set registry "http://xxx"

ReactNative需要Nodejs 4.0版以上,装过低版本的需要卸载后安装新版。
卸载旧版的过程中出现了无法卸载的情况。类似"The Feature That You Are Trying to Use is On a Network Resource XXX",大概是需要源安装文件才能卸载,但是程序找不到源包。后来google到鬼佬的解决办法,用Macrosoft Fix解决。鬼佬的java卸载不掉,类推卸载nodejs就好了。

2、安装 JDKAndroid SDK

这里忽略了,网上有很多的教程,如果是做安卓开发的更不成问题

注意以下几点:

  • **Android SDK version 23 ** (compileSdkVersion in build.gradle)
  • ** SDK build tools version 23.0.1 必须是这个版本,否则不行 ** (buildToolsVersion in build.gradle)
  • ** Android Support Repository >= 17** (for Android Support Library)
  • Android NDK 如果需要的话 (下载和说明在这里)
  • 最好环境变量里配上 ANDROID_HOME ,省得工程中再配置
    但是注意一点,这个后面会讲到

二、开始安装ReactNative

1、安装React-native-cli

这里参考了一些内部文档,还有这篇文章
,以及ReactNative项目中的一些说明,目录\projectName\node_modules\react-native\ReactAndroid下的README.md也有一部分说明,这个目录在初始化后会有。但是这个说明里的步骤仅供参考,因为里面说了 "This setup has only been tested on Mac OS so far."。windows果然是后娘养的,测试都省了。


安装React-native-cli

npm install -g react-native-cli

创建项目

react-native init yourProjectName


如果报错了下面的错误继续看这一段,如果没有跳过继续(npm里新版已经修复这个bug了)

This will walk you through creating a new React Native project in C:\project
\reactNative
events.js:85
throw er; // Unhandled 'error' event
^
Error: spawn npm ENOENT
at exports._errnoException (util.js:746:11)
at Process.ChildProcess._handle.onexit (child_process.js:1053:32)
at child_process.js:1144:20
at process._tickCallback (node.js:355:11)
at Function.Module.runMain (module.js:503:11)
at startup (node.js:129:16)
at node.js:814:3

windows下执行到这里就会报错,原因是npm在windows下的bug(来源于参考资料)。
解决办法
1、直接clone项目主分支master,然后安装。执行下面的命令即可.

git clone https://github.com/facebook/react-native.git
cd react-native/react-native-cli && npm install -g

2、或者github上下载reactNative的master分支,解压以后进入react-native-master\react-native-cli目录下,执行下面的命令

npm install -g


2、App安装和调试

react-Native 有如下指令,以后可能会有更多

Commands:

  • start: starts the webserver
  • bundle: builds the javascript bundle for offline use
  • unbundle: builds javascript as "unbundle" for offline use
  • new-library: generates a native library bridge
  • link: Adds a third-party library to your project. Example: react-native link
    awesome-camera
  • android: generates an Android project for your app
  • run-android: builds your app and starts it on a connected Android emulator o
    r device
  • upgrade: upgrade your app's template files to the latest version; run this a
    fter updating the react-native version in your package.json and running npm inst
    all

首先在独立窗口启动web服务(mac下可以忽略,直接执行后面的即可,windows下似乎无法自己创建独立窗口,所以必须手动独立一个窗口启动服务。旧版reactNative是在工程目录下执行node node_modules/react-native/packager/packager.js启动服务,新版改成react-Native指令),项目目录下执行

react-Native start

然后run工程即可

react-Native run-android


这里注意下,如果是手机或者模拟器是Android 5+的版本,run的最后一步upload apk的时候可能会报错,如下

Unable to install C:\DEV\workspace4node\yourProjectName\android\app\build\output
s\apk\app-debug.apk
com.android.ddmlib.InstallException: Unable to upload some APKs
at com.android.ddmlib.Device.installPackages(Device.java:920)
at com.android.builder.testing.ConnectedDevice.installPackages(Connected
Device.java:113)
at com.android.builder.testing.ConnectedDevice$installPackages$0.call(Un
known Source)
at org.codehaus.groovy.runtime.callsite.CallSiteArray.defaultCall(CallSi
teArray.java:45)

google了一下也没找到比较好的解决办法,据说是sdk bug,不知道和cpu架构是否有关系,stackoverflow上的帖子,还有参考这里官方的issue

只能换个4.4的手机就ok了,或者试试模拟器,推荐genymotion


成功安装程序并启动后,如果是模拟器就可以正常调试了
如果是手机,第一次打开app运行会看到如下图错误提示,原因是没有加载到js包文件,需要设置手机网络环境以使其能连接上PC端node包服务。

注意一下可能遇到这个问题:打开app看到的是空白界面,因为错误提示是以悬浮窗的形式给出的,如果手机设置阻止了app的悬浮窗则会出现空白界面,解决方法(以小米4为例)为,进入安全中心 –> 授权管理 –> 应用权限管理 –> 找到app 点击进入 –> 勾选显示悬浮窗选项,退出app重新进入即可看到错误提示。

1.jpg
2.jpg

手机调试的时候注意以下几点

  • 手机和电脑在同一网络环境下:比如是笔记本连接相同WiFi即可,如果是台式机则需要无线网卡,并断开本地有线网络
  • 手机端设置host:按菜单键调出app菜单选项(如上右图所示) -> 选择Dev Settings-> 选择Debug server host for device -> 填写PC局域网IP地址,点击确定,然后点击底部的Reload JS即可。
  • PC端node包服务正常开启:可通过chrome浏览器中是否可以访问下面url来检测: http://localhost:8081/index.android.bundle?platform=android

确保以上几点之后,点击底部Reload JS即可看到React Native 欢迎界面,修改项目中的index.android.js文件保存后,摇晃手机或者按菜单键调出app菜单,选择Reload JS即可看到修改后的效果,如下图所示。

3.jpg

真机调试和模拟器调试对比:

  • 真机调试:
    优点 —— 安装较简单快捷,运行速度快,且更能反映真实系统环境情况
    缺点 —— 需要连接手机和网络,特别是台式机需要使用无线网卡
    场景 —— 适合开发完验证
  • 模拟器调试:
    优点 —— app安装一次成功后可单机运行,不需要连接手机和网络
    缺点 —— 安装依赖的影像文件太大,运行较慢,且不能完全反应真机情况
    场景 —— 适合开发调试逻辑

最后可以开始开工了
chrome中打开 http://localhost:8081/debugger-ui

哦对忘了说明一点,ReactNative仅支持 Android 4.1+的安卓版本,即API16。

还有一些调试中遇到的问题和心得,到时候再写一篇新的,就到这里吧。

推荐阅读更多精彩内容