React Native 是 Facebook 推出的一个用 Java 语言就能同时编写 ios,android,以及后台的一项技术,它可以做到实时热更新 。FaceBook 也号称这们技术是 “Learn Once,Write AnyWhere”,学习成本只有一次,却完成了所有开发角色的统一。

  这意味着:

  1.app 将来都是可像网页一样热更新,随时发布。

  2.对于一名开发人员,将再也没有前端,终端,后台的区分,他所关注的就是做一整套应用程序,人力将得到最大幅度的整合与释放。

  3.代码复用将会是主旋律,因为是一种语言,大家重复造轮子的成本会越来越节省。

  目前,React Native 也还是有一些缺点的,比如他的 sdk 组件包 size 还比较大,crash 还比较多,在 ios 上支持的内容已经相当不错,android 还属于初级阶段。

  为了学习React Native,有些人建议买个mac,可以没有钱呀!只能在windows上进行环境配置,来感受一下了。

1、安装Java

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

设置环境变量JAVA_HOME,否则后续编译的时候可能会报出找不到tool.jar的错误。

在path中添加%JAVA_HOME%/bin,如下图所示:

2、安装和配置SDK

这里需要注意设置环境变量ANDROID_HOME:Android SDK Manager的位置

例如:(ANDROID_HOME=> D:\Android\sdk)设置环境变量path:例如:(path=> %ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools)

  • 打开Android SDK Manager。
  • 选中以下项目:
  • Android SDK Build-tools version 23.0.1
  • Android 6.0 (API 23)
  • Android Support Repository
  • Local Maven repository for Support Libraries

4、安装node

想要是React Native跑起来需要安装node, 如果没有安装node.js,先去官网安装node.js, 大家可以通过node -v的命令来测试NodeJS是否安装成功

5、安装git

安装React-native需要用到git,如果没有配置git,需要先下载对应的客户端,然后将git加入path环境变量即可。

6、安装react-native命令行工具react-native-cli

git配置完成后可以clone React-native-cli了,建议大家到将react-native-cli克隆到某个盘,不要在c盘直接clone

1)  在命令行中进入你希望react-native安装的目录

2)   输入git clone https://github.com/facebook/react-native.git,等待下载。

这种从国外下载资源的时候,可能 由于被墙而失败,所以有的时候需要FQ进行下载。

3)   进入刚刚目录下的react-native目录下的react-native-cli目录,输入npm install -g

7、创建React Native项目

  进入创建项目的目录后,输入react-native init AwesomeProject,等待一段时间(较慢)

成功后,目录结构如下:

7、运行服务端服务

在命令行中进入项目目录,输入react-native start,等待一段时间。启动成功后,可以用浏览器访问http://localhost:8081/index.android.bundle?platform=android,如果可以访问表示服务器端启动成功。

7、运行项目

刚刚运行服务端的命令行不要关闭,重新启动一个新的命令行,

进入项目目录,输入react-native run-android启动android项目

在此命令之前,请确保安卓模拟器已经配置好并启动。

可以用命令adb devices来查看当前可用的设备列表

等待运行(如果是第一次运行,首先会下载gradle,时间较长)

一般第一次部署的时候,由于IP地址和端口号为配置正确,都会出现错误,模拟器可以用ctrl+M (Menu)来调出Dev setting菜单

真实设备摇一摇手机,点击Dev Settings后,点击Debug server host & port for device,设置IP和端口。这里的IP地址就是电脑的IP。

用react-native start --port 9988 可以修改默认的8081端口

windows 7下React Native环境配置的更多相关文章

  1. 史上最全Windows版本搭建安装React Native环境配置

    史上最全Windows版本搭建安装React Native环境配置 配置过React Native 环境的都知道,在Windows React Native环境配置有很多坑要跳,为了帮助新手快速无误的 ...

  2. 史上最详细Windows版本搭建安装React Native环境配置 转载,比官网的靠谱亲测可用

    史上最详细Windows版本搭建安装React Native环境配置   2016/01/29 |  React Native技术文章 |  Sky丶清|  95条评论 |  33530 views ...

  3. React Native环境配置

    React Native环境配置 史上最全Windows版本搭建安装React Native环境配置 配置过React Native 环境的都知道,在Windows React Native环境配置有 ...

  4. React Native环境配置之Windows版本搭建

    接近年底了,回想这一年都做了啥,学习了啥,然后突然发现,这一年买了不少书,看是看了,就没有完整看完的.悲催. 然后,最近项目也不是很紧了,所以抽空学习了H5.自学啃书还是很无趣的,虽然Head Fir ...

  5. react-native学习笔记--史上最详细Windows版本搭建安装React Native环境配置

    参考:http://www.lcode.org/react-native/ React native中文网:http://reactnative.cn/docs/0.23/android-setup. ...

  6. 史上最详细Windows版本搭建安装React Native环境配置

    说在前面的话: 感谢同事金晓冰倾情奉献本环境搭建教程 之前我们已经讲解了React Native的OS X系统的环境搭建以及配置,鉴于各大群里有很多人反应在Windows环境搭建出现各种问题,今天就特 ...

  7. Windows版本搭建安装React Native环境配置及相关问题

    此文档整理参考地址: http://www.lcode.org/%E5%8F%B2%E4%B8%8A%E6%9C%80%E8%AF%A6%E7%BB%86windows%E7%89%88%E6%9C% ...

  8. Windows版本搭建安装React Native环境配置

    1 安装Chocolatey 打开cmd黑窗口 @powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-obje ...

  9. React Native环境配置、初始化项目、打包安装到手机,以及开发小知识

    1.前言 环境:Win10 + Android 已经在Windows电脑上安装好 Node(v14+).Git.Yarn. JDK(v11) javac -version javac 11.0.15. ...

随机推荐

  1. Linux实战教学笔记05:远程SSH连接服务与基本排错(新手扫盲篇)

    第五节 远程SSH连接服务与基本排错 标签(空格分隔):Linux实战教学笔记-陈思齐 第1章 远程连接LInux系统管理 1.1 为什么要远程连接Linux系统 在实际的工作场景中,虚拟机界面或物理 ...

  2. 二叉树的创建和遍历(C版和java版)

    以这颗树为例:#表示空节点前序遍历(根->左->右)为:ABD##E##C#F## 中序遍历(左->根->右)为:#D#B#E#A#C#F# 后序遍历(左->右-> ...

  3. Linux上运行NET

    今天尝试了下Ubuntu上运行NET程序,按照 https://github.com/aspnet/Home 的指引,一步一步来: 1.安装DNVM(原名KVM) Linux控制台下输入 curl - ...

  4. 在Redhat上为.Net 项目构建基于Jenkins + Github + Mono 的持续集成环境

    在Redhat enterprise 6.5 的服务器上,为在gutub 上的 .net 项目构建一个持续集成环境,用到了Jenkins和mono.因公司的服务器在内网,访问外网时要通过代理,所以在很 ...

  5. ZooKeeper1 利用虚拟机搭建自己的ZooKeeper集群

    前言:       前段时间自己参考网上的文章,梳理了一下基于分布式环境部署的业务系统在解决数据一致性问题上的方案,其中有一个方案是使用ZooKeeper,加之在大数据处理中,ZooKeeper确实起 ...

  6. [ 技术人员创业Tips ] 1:抓住优质客户(上)

    写一篇技术以外的内容,可能会得罪一些人,轻拍,此外本文写的比较随意,写到哪里算哪里,轻拍. IT业不知道从什么时候起特别流行谈创业,似乎不谈创业就落伍,我不评价这种风气的好坏,只提一些自己的一些经验和 ...

  7. Spark笔记:RDD基本操作(上)

    本文主要是讲解spark里RDD的基础操作.RDD是spark特有的数据模型,谈到RDD就会提到什么弹性分布式数据集,什么有向无环图,本文暂时不去展开这些高深概念,在阅读本文时候,大家可以就把RDD当 ...

  8. myeclipse学习总结三(MyEclipse文件查找技巧)

    一.查找文件 使用快捷键[ctrl+shift+R]弹出弹出文件查找框,如下图所示: 二.查找包含某个字符串的文件 使用快捷键[ctrl+H]在弹出对话框中选File Search选项,然后在第一个文 ...

  9. 【MSP是什么】MSP认证之项目群管理学习总结

    首先要说的是,我这篇体会是针对一定的背景的,不能算是一种通用的管理方式,只能是我自己的经验总结,能给大家平常的管理提供一点思路,我就很满足了.先说说背景,我所在公司做的是大型桌面应用软件,简单点说就是 ...

  10. AngularJs之五

    一:angularJs的事件. 1.ng-click指令定义了AngularJS点击事件. <div ng-app="myapp" ng-controller="m ...