码迷,mamicode.com
首页 > Windows程序 > 详细

Windows平台下React-Native开发环境搭建

时间:2016-05-14 18:28:49      阅读:415      评论:0      收藏:0      [点我收藏+]

标签:

  React-Native是由Facebook开发的开源框架,主要用于开发原生APP,是新一代的在移动APP用户体验和Web开发效率间建立平衡点的新型技术。React-Native可以利用JavaScript语言快速开发出高质量的原生应用,正如其设计目标:“Learn Once,write anywhere”,程序员通过一次学习RN的核心技术便可以快速开发出IOS和Android移动应用。大大降低学习成本。由于Facebook的工程师团队大部分使用Mac进行开发,所以现阶段React-Native主要用于开发IOS原生应用,且开发出了高质量的移动应用,React-Native for Android正在进一步的发展,现已利用RN技术成功开发出了Android的原生应用,经测试验证,该技术方案可行,且产品质量较高。RN技术未来具有一统移动开发领域的潜力,因此值得每个程序员的学习掌握。

 环境搭建是学习一项新技术的第一步,windows平台下React-Native开发环境搭建相对于Xcode会更复杂,但通过不断填坑,查找资料,依然可以基于Windows平台快速搭建出开发环境,主要包括以下步骤。

(1)安装JDK

  从Java官网下载对应版本的JDK完成安装,并正确进行环境变量配置,“java -version”可以检测JDK是否安装成功。

(2)安装Android SDK

  可以单独安装Android SDK,也可以通过Eclipse ADT或者Android Studio一并安装。推荐使用Android Studio,以下说明会默认以Android Studio的方式说明。请注意选择x86还是x64版本。然后进入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/Local Maven repository for Support Libraries(之前叫做Android Support Repository)

推荐使用腾讯Bugly的镜像加速下载。查看说明,完成后把ANDROID_HOME环境变量设置为你sdk所在目录,并将SDK的platform-tools子目录加入系统PATH环境变量。此时可在命令提示符中执行sdk和adb命令。安装过程如下图:

技术分享

(3)安装C++环境

  node.js编译C++模块时需要C++环境,此过程可以安装Visual Studio 2013或2015、Windows SDK、cygwin或mingw等其他C++环境,推荐安装Dev-C++,轻量小巧。

(4)安装git for windows

  git主要用于后期从GitHub仓库拖源代码,而git for windows支持傻瓜式安装,其中安装过程中注意选择"Run Git from Windows Command Prompt",可以安装成功后可以在命令提示符中执行git命令

(5)安装Python

  React-Native后期开发过程中将会用到Python,推荐安装Python2.7.x

 (6) 安装Node.js

   从官网下载node.js的官方4.1版本或更高版本,并进行傻瓜式安装。鉴于国内设墙的状况,建议设置npm镜像以加速后面的过程(或使用科学上网工具)。

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

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

(7)安装react-native命令行工具

 npm install -g react-native-cli。安装成功后,便可以执行npm相关命令

(8)创建项目

   进入你的工作目录,运行react-native init MyProject并耐心等待数(或数十)分钟,此过程将成Facebook的GitHub仓库下载程序执行所需的依赖包等。

(9)运行packager

  react-native start,启动packager

技术分享
packager启动过程可以用浏览器访问http://localhost:8081/index.android.bundle?platform=android查看打包后的脚本,第一次访问该链接将加载数十秒。完成后将返回一段JS脚本,出现
以下页面证明packager启动成功。
技术分享

(10)运行模拟器或真机

   模拟器推荐使用Genymotion,比Google自带用户体验更好,性能更优,

本搭建过程通过USB与真机建立连接,通过执行adb devices即可查看已经建立连接的设备。

(11)运行Android程序

   这一步是最关键也是最容易出现问题的一步,保持packager开启,执行react-native run-android即可启动安卓应用。首次运行需要等待数分钟并从网上下载gradle依赖。(这个过程屏幕上可能出现很多小数点,表示下载进度。这个时间可能耗时很久,也可能会不停报错链接超时、连接中断等等——取决于你的网络状况和墙的不特定阻断。总之要顺利下载,请使用稳定有效的科学上网工具。)

备注:

  若apk安装运行出现报错,请检查上文中安装SDK的环节里所有依赖是否都已装全,platform-tools是否已经设置到了PATH环境变量中,同时运行adb devices能否看到设备

 至此,将看到APP红屏报错,这是正常的,我们还需要让app能够正确访问pc端的packager服务。解决方案如下:

  摇晃设备或按Menu键,可以打开调试菜单,点击Dev Settings,选Debug server host for device,输入你的正在运行packager的那台电脑的局域网IP加:8081注意要保证手机和电脑在同一网段,且没有防火墙阻拦),再按back键返回,再按Menu键,在调试菜单中选择Reload JS,就应该可以看到运行的结果了。若真机设备出现白屏但没有弹出任何报错,可以在安全中心里查看应用的“悬浮窗”的权限是否被禁止了。

以上步骤正确设置完毕后便可以在模拟器或真机上看到应用启动界面了。若出现以下页面说明环境搭建成功。

技术分享

 

Windows平台下React-Native开发环境搭建

标签:

原文地址:http://www.cnblogs.com/google12071/p/5493031.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!