可以先浏览一下中文翻译的开发文档具体了解一下关于React Native,想要查看官方文档可以点http://facebook.github.io/react-native/docs/getting-started.html

在官方文档中,只给出在Window上安装React Native的教程,没有给Mac下的教程,我在网上找了半天,找了部分内容,又根据自己的理解整理了一下

1、安装Java

这里需要注意对环境变量的设置,可以根据java -version来检测一下

2、安装SDK

这里需要注意设置环境变量ANDROID_HOME:Android SDK Manager的位置 例如:(PATH => E:\Android\sdk)设置环境变量PATH:例如:(PATH => %ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools)

3、安装node

这货是基于js的,node.js轻量级的Web服务器,想要是React Native跑起来需要安装node, 如果没有安装node.js,先去官网安装node.js,最好是4.1以上版本,来吧,猛戳这里,下载node.js,找好对应的版本,然后去安装就可以了。建议下载稳定版本


大家可以通过node -v的命令来测试NodeJS是否安装成功

4、安装react-native命令行工具React-native-cli安装React-native-cli需要用到git,如果没有配置git,需要先下载对应的客户端,然后将git加入path环境变量即可,git的下载可以从群共享里面。


5.安装Node.js 和 Python2。注意,目前已知Node 7.1版本在windows上无法正常工作,请注意避开这个版本!

choco install nodejs.install
choco install python2

6,安装npm

npm是随同Node.js一起安装的包管理工具,能解决Node.js代码部署上的很多问题。而Yarn是Facebook提供的替代npm的工具(Yarn vs npm: 功能上的差异),可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务(自备梯子)。

npm install -g yarn react-native-cli

如果下载很慢,请用下面的镜像地址:

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

创建项目

react-native init MyProject

进入你的工作目录,运行并耐心等待数(或数十)分钟。

运行packager

react-native start


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

如果你遇到了ERROR Watcher took too long to load的报错,请尝试修改node_modules/react-native/packager/react-packager/src/FileWatcher/index.js,将其中的MAX_WAIT_TIME 从25000改为更大的值(单位是毫秒)



安卓运行

注意在操作前,一定要先连上手机,不然编译会出现问题。

保持packager开启,另外打开一个命令行窗口,然后在工程目录下运行

react-native run-android

首次运行需要等待数分钟并从网上下载gradle依赖。(这个过程屏幕上可能出现很多小数点,表示下载进度。这个时间可能耗时很久,也可能会不停报错链接超时、连接中断等等——取决于你的网络状况和墙的不特定阻断。)

运行完毕后可以在模拟器或真机上看到应用自动启动了。

安卓调试

打开Chrome,访问 http://localhost:8081/debugger-ui,应当能看到一个页面。按F12打开开发者菜单。

在模拟器或真机菜单中选择Debug JS,即可开始调试。

其实到这里我们可以去网上找一个开源的项目,来先做一下运行测试。如果需要看如何创建项目的请跳过。

$ react-native init AwesomeProject

注意:AwesomeProject是项目的名称

如果么有的我提供一个之前开源的美团https://github.com/lookingstars/RNMeituan

然后用git将它克隆到本地,最好是非系统盘。

注: AwesomProject下的anroid下的local.properties文件是没有的,我们可以直接copy以前的Android项目。



接下来我们打开dos窗口,执行 npm start,会显示如图的提示,然后再输入react-native start命令。如果显示如图那样,证明你服务已经启动了,在这里我们可以看到服务的端口是8081.


然后打开浏览器:http://localhost:8081/index.android.bundle?platform=android

如果打印如下信息,说明成功了。


最后我们编译运行项目。记得要先打开Genymotin模拟器或者连上真机。



执行react-native run-android命令

这里给我提上了一个错误,说必须是在项目级别,也就是我们这里项目的最外层。


这是在再用 gradle构建项目依赖的包,到这里是不是感觉很熟悉了。


报了一个错,说的是有个jar的问题。


哦,又给我搞了个错误,gradle版本的问题,哎,不是自己建的项目,果然各种坑,好那我改下gradle的版本吧。

创建项目

react-native init reactNative

由于网络原因,可能需要等待一些时间



仔细预览我们会发现在安装cli的时候,系统给我们一些提示(告诉我们可以怎么运行项目):

To run your app on iOS:

cd D:\html5\react_native\react-native\react-native-cli\reactNative

react-native run-ios

- or -

Open D:\html5\react_native\react-native\react-native-cli\reactNative\ios\reactNative.xcodeproj in Xcode

Hit the Run button

To run your app on Android:

Have an Android emulator running (quickest way to get started), or a device connected

cd D:\html5\react_native\react-native\react-native-cli\reactNative

react-native run-android


我发现我在运行android.bat

运行package

运行React Native需要先启动 server,按照网上的一些教程需要运行node_modules\react-native\packager\packager.js,但是我们发现,这个文件夹下面好像是没有这个文件,但是我们发现了一个packager.sh,打开后发现是一个node命令

THIS_DIR=$(dirname "$0")

node "$THIS_DIR/../local-cli/cli.js" start "$@"

看到这里我们可以试着运行/local-cli/cli.js看看能不能起来

node cli.js start

开发IDE选择(AndroidStudio + WebStorm

AndroidStudio

直接Import项目根目录下的android即可。



WebStorm

WebStorm需要进行一点点配置:
1.首先导入项目,直接Open整个根目录:

2,Edit Configurations配置,配置npm


运行服务,然后通过WebStrom命令窗口部署即可。

关于如何配置和运行请参考:点击打开链接

window环境下搭建react native及相关插件的更多相关文章

  1. Windows环境下搭建React Native

    随着移动开发越来越火热,前端开发也是有之前11年一直火热到现在,不过我发现从去年年底开发,Android和ios基本已经饱和了,特别是随着广大开源社区的中很多人贡献代码,开发已经不是什么问题了,所以现 ...

  2. windows环境下搭建react native环境

    一.基础软件1.安装jdk-1.8.0_922.安装android studio-2.1.2(文件大小为1.2G的那个)3.安装node.js(目前最新是6.3.0)4.安装git-2.9.05.安装 ...

  3. react-native —— 在Windows下搭建React Native Android开发环境

    在Windows下搭建React Native Android开发环境 前段时间在开发者头条收藏了 @天地之灵_邓鋆 分享的<在Windows下搭建React Native Android开发环 ...

  4. 手把手教你在Windows下搭建React Native Android开发环境

    最近看到React Native好像好厉害的样子,好奇心驱使之下体验了一下并将在Window下搭建React Natvie Android环境的步骤记录下来,并有需要的朋友参考.(我都是参考官方文档的 ...

  5. react-native学习(RN)--之Window环境下搭建环境配置,以及初始化建立react-native项目,(真机和模拟器运行的相关错误解决办法,android打包报错)

    react-native以后会更火的 一.安装java 二.安装Android Studio 三.安装react-native需要的Android studio额外部分 四.安装nodeJS  五.安 ...

  6. 【转】在Windows下搭建React Native Android开发环境

    http://www.jianshu.com/p/2fdc4655ddf8 安装JDK 从Java官网下载JDK并安装.请注意选择x86还是x64版本. 推荐将JDK的bin目录加入系统PATH环境变 ...

  7. 【RN - 基础】之Windows下搭建React Native开发环境

    前言 React Native由Facebook公司于2015年F8大会上开源,其主张“Learn once, write everywhere”.React Native的核心设计理念是:既拥有Na ...

  8. Mac下搭建react native开发环境

    安装必需软件 Homebrew Homebrew, Mac系统的包管理器,用于安装NodeJS和一些其他必需的工具软件. /usr/bin/ruby -e "$(curl -fsSL htt ...

  9. Window环境下搭建Vue.js开发环境

    原文链接:http://blog.csdn.net/solo95/article/details/72084907 笔者最近在进行前端的学习,在点完了HTML5.CSS3.JavaScript等技能树 ...

随机推荐

  1. Spark Streaming应用启动过程分析

    本文为SparkStreaming源码剖析的第三篇,主要分析SparkStreaming启动过程. 在调用StreamingContext.start方法后,进入JobScheduler.start方 ...

  2. log4j日志记录级别是如何工作?

    级别p的级别使用q,在记录日志请求时,如果p>=q启用.这条规则是log4j的核心.它假设级别是有序的.对于标准级别它们关系如下:ALL < DEBUG < INFO < WA ...

  3. 亲密接触Redis-第三天(Redis的Load Balance)

    前言 上两天讲述了Redis的基本搭建和基于HA的集群布署方式以及相关的策略和注意点.今天开始讲述Redis的Cluster功能,而这块目前来说网上资料不是太全,就算有1,2篇也只是单讲服务端的搭建也 ...

  4. ArrayList、HashMap、HashSet源码总结

    ArrayList: 1. ArrayList是List接口的大小可变数组的实现,此实现是不同步的. 2. ArrayList内部使用类型为Object[]的数组存储元素. 3. ArrayList默 ...

  5. FORM中读取图片

    1.创建ITEM 重要属性如下 item属性:图像 大小样式:调整 数据库项:否 2.读取触发器 在block级别,创建trigger READ_IMAGE_FILE('D:\'||:XX_EMOLY ...

  6. Github上怎么修改别人的项目并且提交给原作者!图文并茂!

    Github上怎么修改别人的项目并且提交给原作者!图文并茂! 写这篇博客的初衷,是因为我的项目Only需要一些朋友一起参与进来,但是很多的Git都不是很熟练,其实版本控制这种东西没有什么难度的,只要稍 ...

  7. A*寻路算法入门(七)

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;) 免责申明:本博客提供的所有翻译文章原稿均来自互联网,仅供学习交流 ...

  8. Android 官方命令深入分析之android

    作者:宋志辉 android命令是一个非常重要的开发工具,它可以: 创建.删除和查看Android Virtual Devices(AVDs). 创建和更新android项目. 更新你的android ...

  9. 判断无向图是否有环路的方法 -并查集 -BFS

    可以利用并查集或者带颜色标记的BFS(来自算法导论)判断. 首先介绍第一种,用并查集来判断: 首先初始化所有元素的根为-1,-1代表根节点,接下来对于图中的每一条边(v1,v2)都并入集合,并入的方式 ...

  10. pig的一些实例(我常用的语法)

    在pig中, dump和store会分别完成两个MR,不会一起进行 1:加载名用正则表达式: LOAD'/user/wizad/data/wizad/raw/2014-0{6,7-0,7-1,7-2, ...