针对前端初级学者，如何在windows下搭建react-native环境详细教程

我也是自学react-native，当年到处找教程，然而最难的一步却是环境的搭建，虽然网上有很多关于环境配置的文章，但是都不够详细

所以我也是踩着坑过来的，毕竟我也只是个前端初级学者，所以我想写一篇让我自己也能看得懂的教程，让大家共勉。

作为一名学端学者，我的顺序可能跟别人的不一样。比如说node和git基本上是必备。

1、安装node

基于js的，node.js轻量级的Web服务器，想要是React Native跑起来需要安装node，如果没有安装node.js，先去官网安装node.js,最好是4.1以上版本

下载地址：https://nodejs.org/en/

这个就不多说了，不会的可以去百度怎么安装node.

2、安装git

这个我也不想多说的，前端应该都用过，都会。

官网去下载一个就可以了，无非就是注意第三步时勾选不要选错了

http://code.google.com/p/msysgit/downloads/list

3、安装Java

react-native的编译需要用到java，如果你想要在windows上运行java写的程序，那么你需要安装java运行环境

如果你想在windows上进行java开发，那么你需要安装jdk

http://rj.baidu.com/soft/detail/14459.html?ald

你可以去官网下载，也可以去百度，下载下来的东西大约长这个样子：

然后直接打开安装就可以了，中间不用做任何更改。

记下你安装的目录地址，配置环境要用！

重点：网上的教程都没有讲这一步：

安装完成jdk后要进行windows环境变量的配置才可以运行java或使用java进行开发

1、右键“我的电脑”（XP）（或者“计算机”（win7），“这台电脑”(win8)）,选择“属性”

2、点击左侧“高级系统设计“

3、点击选择”环境变量“，进入环境变量的设置

4、在系统变量里新建一个名为”JAVA_HOME“的变量，变量值为安装jdk时的路径，比如此处为”D:\Program\Java\jdk“,点击“确定”

5、在系统变量里新建一个名为“CLASSPATH”的变量，变量值为“.;%JAVA_HOME%/lib/dt.jar;%JAVA_HOME%/lib/tools.jar;”，点击“确定”

6、找到并选中系统变量的“Path”变量，点击“编辑”,在后面添加“;%JAVA_HOME%/bin;%JAVA_HOME%/jre/bin”，点击“确定”

最后在“环境变量”上点击“确定”，完成环境变量的配置

打开命令行提示符（运行里输入“CMD”，回车），

输入“java”，如果返回一大串命令提示，说明jre成功安装且环境变量配置正确，

输入“javac”，如果返回一大串命令提示，说明jdk成功安装且环境变量配置正确

4、安装android环境SDK

直接百度就可以找到android SDK的windows下载地址，下载安装也都是傻瓜式的

跟java一样需要配置环境变量。

1.在系统变量里找到Path选中，点击下面的编辑。（跟上面java配置方法一样）。

在变量值里加入androidSDK中platform-tools和tools的目录路径，

这里我的是D:\android-sdk_r20.0.3-windows\android-sdk-windows\platform-tools和D:\adt-bundle-windows-x86_64-20130729\sdk\tools。

当然两个之间要加个分号“;”

测试就是在终端输入: adb ,如果出现一长串，就说明配置成功了

然后我要告诉你的是：你的环境已经搭好了！！

接下来，我们来玩玩react-native吧！

我们已经安装过git，我们就不要再使用终端了，就使用安装的git bash

1.先择你想要创建项目的文件夹，点击右键，选择 git bash here,然后就会弹出一个跟终端一样的git bash 窗口:，并且直接到达你想要的文件夹下。

2.输入：npm install -g react-native-cli 然后enter

这一步是安装react-native命令。需要的时间比较长，我不知道是不是我网速的原因，也有可能会失败，失败就再输入。

3.等待安装成功之后，你就可以创建你的项目了：

在命令行中输入：react-native init wushaoxion

等待一段时间之后，它就会创建一个名为wushaoxion的项目，这个过程也是很漫长的，这个我不知道是不是我电脑的配置原因。

当它这样的时候你不要以为它卡了，实际上它一直在运行。

（好漫长的等啊等，我应该在写前面内容的时候就让它跑起来的，吧嗒唉呀好无聊啊，可惜没人跟我聊天。。。快点好啊，怎么这么慢啊，我的电脑是不是坏了，唉呀唉呀

，我就不断续讲了吧。。。我实在是不想再演示了，你懂就行了，我去网上下载两个图片）

这个地方之所以慢是因为要下载的东西被墙了，如果你有vpn会快一点，但是我们也有淘宝的npm境像可以使用：

1.通过config命令

npm config set registry https://registry.npm.taobao.org  npm info underscore （如果上面配置正确这个命令会有字符串response）

2.命令行指定

npm --registry https://registry.npm.taobao.org info underscore

再运行的话速度就会快很多

就像这样，就代表初始化项目完成了，然后你打开文件夹，会发现它里面有很多内容，我们先不要管它。

4.这时候在终端里输入：react-native start

不好意思，你又要等很久了

运行成功之后不要关，不要关，不要关，重要的事情说三次！

5.此时我们可以在浏览器中打开：http://localhost:8081/index.android.bundle?platform=android

然后就会看到一大串代码

6、然后我们在第一次git bash here的地方再次右键，再次选择git bash here,另外开启一个命令行。

然后拿一个android的手机，开启开发者模式，每个手机开启的方式可能有点不一样，自行百度就好了

一定要开启开发者模式！

然后在命令行里输入:react-native run-android

你可能又要等好久了，惊喜总是需要酝酿的。

成功以后，会像这样：

然后你的手机上安装了一个app，你有可能会问：打不开怎么办？

打不开就对了，你需要在应用设置里给它最高权限。

打开报错了怎么办？

报错就对了！

对，就是这样子的，你摇一摇你的手机，就像玩微信的摇一摇那样，它会弹出一个列表

点击Dev Settings后，点击Debug server host & port for device,设置IP和端口

填入的的IP就是电脑的IP，不知道的话可以在命令行中输入ipconfig进行查询（但是不要在上面的两个git bash里面查询），端口号固定8081。

然后我们再次摇一摇，选择Reload JS.你就会看到如下界面：

再怎么办？

问得好，找到你项目文件下的 index.android.js.另一个ios的我们暂时不管，因为windows下我也不知道怎么测试ios.

用你喜欢的ide打开它，如果你有学习过reactJs的一些内容，你应该能看懂一些

那么你就可以尝试更改里面的内容了。

更改之后保存，然后摇一摇你的手机，选择Reload JS, 然后手机上的界面就刷新了

最好不要瞎改，不然报错你又不知道怎么办，自己找一个教程，慢慢研究吧！

后记：

1.一定要在终端检验你的java 和 android的环境配置有没有配置好

2.命令行运行过程中有可能会出现报错，那么你就详细检查你的配置步骤有没有出错

3.如果以上步骤都没有出问题依然报错，请重新运行，如果还是报错的话，一定要忍住不要砸电脑，因为我也不知道怎么办了。

纯属个人经验，还望行家指导！

针对前端初级学者，如何在windows下搭建react-native环境详细教程相关推荐

Android之Windows下搭建React Native Android开发环境（差不多搞了一天）
Android之Windows下搭建React Native Android开发环境穷逼买不起mac,但是他们都说React Native Android只能在mac下面 ...
php图文安装教程,windows下安装php开发环境详细教程（附下载链接）
本篇文章为大家详细介绍一下windows下安装php开发环境的流程,建议初学者使用集成环境开发php,以免失去学习兴趣. 推荐集成环境下载地址:php集成环境下载 windows下安装php环境流程: ...
如何在Windows下搭建Android开发环境
搭建Android开发环境 1 下载Android SDK http://code.google.com/android/download.html 这是官方网址,进入后跟着流程走,选择适合于自己平台 ...
在windows下搭建React Native Android开发环境
1.登录 React Native 中文网 http://reactnative.cn/docs/0.45/getting-started.html 2.登录 Chocolatey 下载包管理工具 h ...
在Windows下搭建React Native Android开发环境常见问题
1. task ':app:compileDebugJavaWithJavac'. > Could not find tools.jar 是没有配置Java环境 D:/Java\jdk1.8.0 ...
如何在Windows下搭建Qt安卓开发环境？
一.导读本文描述如何在Windows下搭建Qt安卓开发环境,由于Qt维护的安卓开发环境和安卓开发环境在很大程度上不兼容,所以在选择Qt版本的时候需要注意:在JDK和Android SDK环境的选择上 ...
windows搭建python开发环境方法_04 Windows下搭建 Python 开发环境 - Python 入门教程
前面两个小节中我们已经学习了在 MacOS 和 Ubuntu 中安装 Python 的开发环境.当然,作为用户基数最多的 Windows 操作系统,我们当然不会忘记,这节课我们就来学习下如何在 Win ...
windows 下配置 react native 开发环境
windows 下配置 react native 开发环境安装nvm 由于react native 需要使用 NodeJs 4.0以上版本,为了方便切换NodeJs,首先我们需要安装nvm. 你可以 ...
Windows下搭建ESP-IDF开发环境，适合ESP32/S2/C3/S3系列模组二次开发
前言本教程适用于以下两种用户: ①无Linux环境搭建经验或搭建Linux开发环境不成功: ②使用安信可windows一体化环境IDE V1.5开发环境搭建不成功: 本教程提供了windows下搭建 ...
windows下搭建iphone开发环境
在windows下搭建iphone开发环境,我是这样做的. 1. 安装虚拟机,并且在虚拟机中安装mac os: 2. 启动虚拟机的mac os, 然后安装 iphone sdk. 具体请参考以下几篇文 ...

针对前端初级学者，如何在windows下搭建react-native环境详细教程

针对前端初级学者，如何在windows下搭建react-native环境详细教程相关推荐

最新文章

热门文章