ReactNative开发环境搭建-真正的for windows

重点内容
文章写给已经使用Android Studio开发Android的广大同学，关于AS环境的搭建这里不再负责扫盲，请各位童鞋见谅！

在落笔之前其实网上已经能够搜索到很多关于RN开发环境搭建的文章，只是很多都是转来转区的而且都是土豪苹果党的搭建步骤，虽然大体的安装步骤类似，但是还是觉着有必要专门写一篇Windows用户的搭建步骤，供大家参考交流。

---

正文：
最初参考的步骤来自ReactNative中文网的环境搭建步骤，其中绝大部分的过程也是来自那里的，由于缺少各种科学上网工具和翻墙软件，Pthony、node.js的安装我直接选择的是亲自到官网下载然后手动安装的方式进行，一路走来，并没有发现什么不妥。

准备工作

1.下载Python
2.下载Node.js
3.Android SDK
4.Android Studio
5.JDK 8

开始安装

安装Node和Python

自行前往官网或者是直接使用我上传到CSDN的安装包，python和node.js安装不分前后.
！！看注意事项！！，如果是自行下载的安装包请务必选择python2（Python3目前不支持）和Node 7.1版本在windows上无法正常工作，请避开这个版本！
windows下安装python和Node.js，一路next下去，有安装软件路径洁癖的人请在安装过程中注意修改安装路径。
Node.js安装完成以后，建议设置npm镜像以加速后面的过程（或使用科学上网工具当然我没有）。

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

安装ReactNative

Yarn是Facebook提供的替代npm的工具，可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。
Node.js安装完成以后会将自己添加到环境变量中，因为Node自带npm所以可直接使用npm命令执行

npm install -g yarn react-native-cli

安装命令行工具，如果npm报错，可以选择手动将node的路径添加到Path中

Android Studio

我们的情景设置是您已经安装并能正确使用AS环境，接下来的您只要检查下File-Settings-SDK
1、在SDK Platforms窗口中，选择Show Package Details，然后在Android 6.0 (Marshmallow)中勾选Google APIs、Android SDK Platform 23、Intel x86 Atom System Image、Intel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image。
2、在SDK Tools窗口中，选择Show Package Details，然后在Android SDK Build Tools中勾选Android SDK Build-Tools 23.0.1。（必须是这个版本）

重要的环境变量配置

1、ANDROID_HOME环境变量

确保ANDROID_HOME环境变量正确地指向了你安装的Android SDK的路径。

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建

具体的路径可能和下图不一致，请自行确认。

你需要关闭现有的命令符提示窗口然后重新打开，这样新的环境变量才能生效。
2、adb的环境变量配置（命令行查看连接的设备信息的，很有用）
你要知道自己的adb.exe的路径，一般在你的Android-sdk的路径下platform-tools目录下
配置adb的环境变量，方便你在任何路径下使用
CLASSPATH

Path

以上环境搭建完毕

HelloWorld

测试下环境如何
准备好了以后，使用的Genmotion模拟器，真机建议使用Android 5.0及以上版本的。

react-native init mydemo

找到项目AwesomeProject,记事本打开index.android.js文件编辑内容如下 ：

import React, { Component } from 'react';import { AppRegistry, Text } from 'react-native';class mydemo extends Component {  render() {    return (      <Text>Hello world!</Text>    );  }}// 注意，这里用引号括起来的'mydemo'必须和你init创建的项目名一致AppRegistry.registerComponent('mydemo', () => mydemo);

cd AwesomeProject
react-native run-android

Windows用户请注意，请不要在命令行默认的System32目录中init项目！会有各种权限限制导致不能运行！

手动运行Packager
有个常见的问题是在你运行react-native run-android命令后，Packager可能不会自动运行。此时你可以手动启动它：

cd AwesomeProject
react-native start
继续执行
react-native run-android

如果你碰到了ERROR Watcher took too long to load的报错，请尝试将这个文件中的MAX_WAIT_TIME值改得更大一些 (文件在node_modules/react-native/目录下)。

踩过的坑

1、报错：
com.android.ddmlib.InstallException: Unable to upload some APKs?

解决方案：

buildscript {
repositories {
jcenter()
}
dependencies {
classpath ‘com.android.tools.build:gradle:1.2.3’
}
}
修改gradle的版本

2、报错：

Android react native couldn’t get batched bridge，出现白屏现象

点击reload

解决方案：

（1）首先尝试晃动手机，正常情况会出先一个弹窗–选择Dev Settings 根据截图中最后一个提示填写与你的本机相同的IP地址如 10.1.1.1:8081,端口8081不变。然后返回–晃动手机-弹窗–reload Js。
（2）有些手机比如小米系统的，无法显示弹窗，多半是因为系统将我们的应用的权限限制的原因。打开设置–其他应用管理–找到我们的demo–权限管理–打开悬浮窗，重复步骤（1）即可

cd AwesomeProject
react-native start
react-native run-android

环境搭建过程中参考的文章：
http://www.open-open.com/lib/view/open1442459848805.html
http://reactnative.cn/docs/0.40/getting-started.html

感谢

欢迎访问我的博客 http://blog.csdn.net/sfq19881224

欢迎访问我的简书 http://www.jianshu.com/u/4cbb3d5d175a

有微信小程序开发兴趣的可以进群讨论 点击链接加入群【小程序Club】：https://jq.qq.com/?_wv=1027&k=43fGwdS

免费小程序推荐公众号–请关注 ONE程序