微信公众号：
专注前端 / React Native
操作系统:windows 10 64位 版本号:10586.545
要求:提前备好FQ软件或者VPN,避免跟当初的我一样,一路踏坑,泪流满面
以下是由本人亲自搭建并进行记录,如有任何意见请联系我QQ:603049583
第一步:安装JAVA(本人安装的是最新版本JDK1.8),
并配置变量环境
第二步:安装SDK
目录如上
(1)首先设置SDK环境变量,
Android SDK Manager的位置
例如：（ANDROID_HOME=> D:\android-sdk-windows）
设置环境变量PATH：
例如：（PATH=> %ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools）
(2)然后双击打开SDK Manager.exe
(3)如果你没有FQ,那么请换一个镜像站地址点击这里
或访问http://www.androiddevtools.cn/,查看切换镜像地址以及设置方法
(4)设置完成之后点击菜单Packages-->Reload
(5)然后选择图中所勾选文件,点击右下方Install packages
(6)接着点击Accept License,然后点击Install进行下载(由于文件需要很久才能下载下来,所以可以进行第三步了,但是不要关闭Android SDK窗口)
第三步:安装Node,访问https://nodejs.org/en/
node.js是轻量级的Web服务器，React Native跑起来需要安装node
通过node -v的命令来测试NodeJS是否安装成功
第四步:安装Git
安装React-native需要用到git，如果没有配置git，需要先下载对应的客户端,访问https://git-for-windows.github.io/
安装时这里选择第二个
第六步:安装react-native命令行工具
先创建文件名,(名字可以自定义),按住Shift键,鼠标右键点击在此打开命令窗口
输入git clone https://github.com/facebook/react-native.git(过程比较久,看网速啦)
克隆成功
然后进入目录下的react-native目录下的react-native-cli目录，输入npm install -g 回车
完成
然后就有react-native命令了
第七步:创建React Native项目
进入你要要存放项目的盘符,执行react-native init (项目名)(这里需要好长时间,我先下去吃个早餐,上来应该差不多了,嘿嘿~)
OK
运行packager,需要等待一段时间
react-native start
用浏览器访问http://localhost:8081/index.android.bundle?platform=android看看是否可以看到打包后的脚本（看到很长的js代码就对了）。第一次访问通常需要十几秒，并且在packager的命令行可以看到进度。
安装VirtualBox
安装Genymotion
配置Genymotion
打开Genymotion---点击菜单栏Setting--->ADB,选择use custom Android SDK tools,点击Browse,选择前面SDK安装目录
如果下面是X,说明目录不对
然后,进入Genymotion官网注册一个账号,官网:https://www.genymotion.com/account/create/
点击创Create an Account,跳转代表创建成功,如果没有动作,请上拉至顶部,看看是否有黄色警示框,(由于我的笔记本屏幕小,当初就在这里浪费了点时间,结果人家的提示框在上面)
注册成功后,回到Genymotion进行登录,点击Setting-->Account,点击Sign in,登录你的账号
下载Android镜像
回到Genymotion,点击菜单栏ADD,选择系统型号,下一步
特别说明,如果这里在下载过程中失败了,请去谷歌/百度一个OVA(虚拟化设备)格式的镜像,我的这里下载成功了(没成功的最后给你们演示下替换过程)
由于我的电脑配置低,所以按低标准设置,不过够了,如果后期有需求,可以再次设置
设置完后双击,开启虚拟机/或者点Start
运行package,在命令行中进入项目目录，输入react-native start，等待一段时间：
第一次会很慢,因为需要下载些文件
进行到这里.是不是感觉快要成功了呢?马上就要实现你用React Native写的第一个Hello World,是不是激动的不行不行滴~,哈哈哈*N,想当初啊...哎..不说了,咱不提过去的事
继续等等.....
开始下载了,(松了口气~~~)<如果这里有下载失败的,那就是需要FQ了,拿出你的VPN或者你懂得....,不然红色的字体哗啦啦就出来了>
继续等.....哎呀,我去,出错了
error:failed to find Build Tools revision 23.0.1
错误原因是没有找到23.0.1的构建工具,大白话就是缺东西
打开Android SDK,发现没有下载图中这个,赶紧补上,失误失误~
重新执行react native,又报错了
不用鸟,再次执行命令,这次需要下载的东西都下完了,当看到下面这样的画面时你就可以稍微激动一下了
这里又报了个错
再次不鸟,继续执行命令,成功~~~
切出你的安卓模拟器,看见Welcome....代表你成功了 ,当然有点小瑕疵,WIFI与信号图标带个?号,这个需要执行一个命令,命令改天我补上来,不过不影响,
希望此教程能让你快速搭建window React Native 安卓开发环境,帮你节省些时间,少走一些坑路,
其实我这次安装出现报错很少的,如果要把所有错误全部弄出来,那可能得说个两三天,如果你用的是MAC,
恭喜你,你不用这么麻烦,MAC上半个小时就搞定了,为什么呢,
因为React Native是Fackbook推出的,而他们公司全部用苹果电脑,所以windows就很麻烦了,
此帖不断更新中......
有问题请谷歌,不要浪费时间在百度,真心的
最后再放上我当初躺在深坑中看过的几篇教程:
博客:同步更新
最全教程:可参考此教程,
深坑总结帖:React native深坑总结
中文网教程:React native中文网教程
网友评论