React-native 环境配置window端mac端

    新技术React-native，听很多同学都在学，网络上也大力推广。但作为一名Android原生爱好者却对此若近若离。最近突发奇想，突然想试试。但由于本人的主力系统是windows，mac也是在虚拟机上装着玩玩。所以先从windows上入手，但也踩了无数坑。

确实如此，React-native对ios的支持比windows要好的太多了。也在此记录下所有的过程及异常情况处理。

首先一点，就是最好跟着中文官方文档走。无论是windows端还是mac端，访便无数博客，到头来还是看中文官方

文档。而以下只是我的搭建记录罢了。

Windows端：

做好准备，GIT、JDK，SDK，PYTHON2+。把基本的环境准备好。特别是SDK中SDK Platforms窗口中选择Android6.0勾选Google APIs、Android SDK Platform23、Intel x86 Atom System Image、Intel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image。

在SDK Tools窗口中在Android SDK Build Tools中勾选Android SDK Build-Tools 23.0.1此版本，在最底部勾选Android Support Repository。

并且ANDROID_HOME等环境变量要在PATH中设置好，否则在编译时会失败。

-----小型分割线-----

以上工作准备好后就还是环境搭建了。首先是下载最新版的node.js安装包。我们不下解压版是因为安装包可以直接配置环境变量。

在安装好后，可以查看PATH中是否存在node.js的环境。

打开cmd，输入一下命令设置npm镜像加速：

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

在下载react-native-cli时我们一定要使用官网的方法下载安装yarn：

npm install -g yarn react-native-cli

并设置其镜像源：

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

在此，所有的环境基本准备好，接下来就需要开始测试环境搭建成功，并跑我们的项目了。

找一个自己的文件夹作为自己React-native项目的工作空间，并将cmd路径移动至此。输入一下命令，建立AwesomeProject项目：

react-native init AwesomeProject

此时这就是我们的React-native的项目了。进入其中并先进行网络测试：

cd AwesomeProject
react-native start

此时，项目会运行服务端（总感觉这个描述不对哈）。然后可以进入 http://localhost:8081/index.android.bundle?platform=android查看自己的链接是否成功。如果是以下情况，就是完成了。

之后就可以接着打开另一个cmd，到此项目里，并使用一下命令：

react-native run-android

稍等片刻就可以等待android手机运行成功啦。

当然，以上是个完美的故事。在测试时，我出现了连个问题。其中第一个问题恶心至极，你会在react-native start的时候出现以下情况：

出现如图这样的错误，查了很久，真的很久。并且在提出问题时也有和我一样的出现了该问题。目前貌似只有两个解决方案，两个我都试过，不过另一个没有成功。首先就是在自己的项目里使用一下命令行：

yarn remove babel-preset-react-native
yarn add [email protected]

本人验证，并推荐给多人验证得出结论。表名基本可以解决这类问题。

第二个方法是使用一下命令：

npm uninstall babel-preset-react-native
npm install [email protected] —save

不过测试结果并没有成功。也不知道是什么问题。

第二个问题就好解决了，assets文件夹找不到，我们只需要在项目中的android\app\src\main中创建一个assets文件夹。然后cmd在项目路径中运行以下命令：

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/s

rc/main/assets/index.android.bundle --assets-dest android/app/src/main/res

就可以解决这个问题了。

-----------------粗暴的分割线-------------------

Mac端：

一个词：友好。

在Windows的经验下，紧跟着中文官方文档搭建后，就结束了React-native环境搭建。

在此我只是要记录一个问题在文档里也特殊说明的一点：

一定需要注意这个版本的问题，不像Windows环境下，此时在init项目时要设置版本号，不然运行前的编译无法通过。