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

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,就应该可以看到运行的结果了。若真机设备出现白屏但没有弹出任何报错,可以在安全中心里查看应用的“悬浮窗”的权限是否被禁止了。

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

时间: 2024-07-31 08:00:24

Windows平台下React-Native开发环境搭建的相关文章

Window平台下React Native 开发环境搭建

1. 安装Node.js 2. 安装react-nativew-cli 命令行工具 npm install -g react-nativew-cli 3. 创建项目 $ react-native init appSmaple 4. 运行 $ cd appSmaple$ react-native start 5. 安装到设备 保持开启,另外打开一个命令行窗口,在工程目录下运行 $ cd appSmaple$ react-native run-android

windows平台下Android studio开发环境搭建教程

最近,Google 已宣布,为了简化 Android 的开发力度,以重点建设 Android Studio 工具,到今年年底将停止支持Eclipse等其他集成开发环境 .而随着Android studio正式版的推出和完善,Android开发者们转向Android studio开发平台也将是大势所趋! 小弟Vike原先学习Android也是一直用的eclipse,虽然时间不长,而且用起来慢点,卡点,但是毕竟熟悉起来了,猛地要转到一个新平台,还真是相当不习惯.且不说快捷键有变化,就连Android

Windows下的 React Native 的环境搭建

感觉react好难QAQ 一.开发环境搭建要求 在Windows操作系统搭建React Native开发环境要求在电脑上安装好JDK,Android SDK,还要求电脑上安装有一套C++编译器,如果没有,推荐安装微软的VIsual Studio Community 2015 二.环境搭建 1.安装JDK(需安装1.8或更高版本) 下载对应你电脑版本的32位或64位JDK,第一次是JDK,第二次是jre,建议安装到同一个文件夹下的不同文件夹中.安装时可以修改安装目录. 2.JDK环境变量配置 (1

Android React Native 开发环境搭建---windows下

环境搭建 环境搭建可以参考RN官网,也可以参考中文版本:http://reactnative.cn/docs/0.45/getting-started.html 如果你希望可以看到原版的安装流程,可以看官方的地址,本文只是我个人的实践,并且仅限于window平台. 官方的地址:https://facebook.github.io/react-native/docs/getting-started.html 1.下载Chocolatey 去官网下载,一般没有问题. 2.Node,python2,j

React Native开发环境搭建

安装Xcode 安装Homebrew 检查是否有警告 安装Android SDK 安装flow和watchman 安装nodejs 安装react-native-cli 安装Genymotion 安装Webstorm 10 创建React Native空项目 使用Webstorm编辑JSX代码文件 在iOS模拟器中运行 在Android模拟器中运行 安装Xcode 从App Store搜索下载.需要Apple Id账号. 安装Homebrew 打开Terminal,执行以下命令即可安装.详情请参

React Native开发 - 搭建React Native开发环境

移动开发以前一般都是原生的语言来开发,Android开发是用Java语言,IOS的开发是Object-C或者Swift.那么对于开发一个App,至少需要两套代码.两个团队.对于公司来说,成本还是有的.然而现在有蛮多的公司开发App是基于React Native来开发的,这样可以做到一个App,就是一套代码,一个团队.对于公司来说,无疑节约了成本. <React Native开发>这系列的文章主要是记录本人利用React Native学习开发的笔记,这一篇文章是第一篇<搭建React Na

搭建React Native开发环境遇到的几个问题

根据http://blog.csdn.net/itpinpai/article/details/50809068这篇文章初步搭建React Native 开发环境, 遇到几个问题 首先端口可能被占用了, 访问8081时提示无法访问 解决方法: 在运行react-native start时添加参数--port 8899, 或者在package.json中修改"scripts"中参数, 添加端口号, 或者修改项目下的node_modules\react-native\local-cli\s

React Native iOS环境搭建

前段时间React Native for Android发布,感觉React Native会越来越多的公司开始研究.使用.所以周六也抽空搭建了iOS的开发环境,以便以后利用空闲的时间能够学习一下. 废话不多说了,下面简单的列出步骤吧. 1. 安装Homebrew Homebrew主要用于安装后面需要安装的watchman.flow 打开MAC的终端,输入如下命令: ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/i

Mac配置React Native开发环境

一直觉得学习一样东西,不动手怎么也学不会,就像学习swift,看了视频没有动手操作,记住的也就那么点,自己写出东西不是这里有问题就是那里出错. 所以,以后学习自己要多动手. 现在我的学习任务就是: 提高自己的iOS代码专业能力,掌握Swift3.0,顺便学习学习React Native. 学习一门语言当然少不了硬件和软件设备啦,不然怎么学习...嘿嘿,对吧!!!! 下面记录下自己配置React Native开发环境: 1> 安装brew: 打开终端,输入:   /usr/bin/ruby -e

React Native 开发环境安装和配置使用报错: -bash: react-native: command not found

[React  Native 开发环境安装和配置:-bash: react-native: command not found 报错: 前提是安装homebrew,node.js ,npm ,watchman,flow都成功.React  Native 开发环境安装和配置 执行react-native init TestProject 命令 创建demo时报错:-bash: react-native: command not found 报错提示:Please include the follo