*** 本篇只是学习的一个笔记，重在展现实现的过程，并没有太多的理论介绍，之后会着重添加理论篇 ***
Windows下Android环境的搭建
有翻墙工具的情况下，可以采用官网建议的Chocolatey安装Python和Node环境，屌丝请自行安装咯。
安装Python 2
注意不支持Python 3，Python 2下载
安装就是无脑Next(强迫症可以切换安装目录，我就很严重)。
安装完成后，打开到刚刚安装的目录，地址栏复制该目录根目录，环境变量->系统变量->Path，添加到最后，注意分号，配置完成。
测试配置是否成功，cmd：
python
若出现版本号等相关信息 则配置成功。
安装Node
暂不支持Node 7.1版本，Node 6.10版本下载
安装略。。。
安装完成后会自动配置到Path路径。
测试一哈：cmd：
node -v
若出现版本号 则安装成功。
安装完node后建议设置npm镜像以加速后面的过程（或使用科学上网工具）。注意：不要使用cnpm！cnpm安装的模块路径比较奇怪，packager不能正常识别！
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
Yarn、React Native的命令行工具（react-native-cli）
Yarn是Facebook提供的替代npm的工具，可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。
Yarn安装：
npm install -g yarn react-native-cli
安装完yarn后同理也要设置镜像源：
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
如果你遇到EACCES: permission denied权限错误，可以尝试运行下面的命令（限linux系统）：
sudo npm install -g yarn react-native-cli
Android Studio
饭碗，不解释了
- 开启Gradle Deamom
开启Gradle Daemon可以极大地提升java代码的增量编译速度。
(if not exist "%USERPROFILE%/.gradle" mkdir "%USERPROFILE%/.gradle") && (echo org.gradle.daemon=true >> "%USERPROFILE%/.gradle/gradle.properties")
测试安装
react-native init TestProject
cd TestProject
react-native run-android
请不要直接打开cmd就执行init操作，先切换到想要放置的工作目录，再执行，是在当前目录下创建项目。等待一段时间创建完成后，cd到项目目录，执行run，确保连接真机或者模拟器。
WebStorm安装
js开发的编辑器，和as同出基于IntelliJ IDEA，习惯了其风格。
WebStorm下载
点击DownLoad就能下载安装了。不过只能免费试用30天，所以需要破解。
打开后，会弹出注册码的窗口，然后选择“license server” 输入：http://idea.imsxm.com/ 即可破解完成。
PS：在线激活有一个过期时间，这个时间一过就必须再次联网授权服务器请求激活。
-
配置
File->Default Settings：
Default Settings配置
File->Settings：
Setting配置
-
代码补齐提示
File–>Setting–>Languages & Frameworks–>JavaScript–>Libraries，点击右边的Download按钮，选择TypeScript community stubs，下载react和react-native。 然后下载ReactNative.jar，下载之后在WebStorm中点击File–>Import Settings导入重启即可使用。这样WebStorm里面就会有React Native组件名称、组件属性、StyleSheet属性等的一些自动补全。 -
运行配置
跑项目 不需要再用命令行了，类似AS按个小三角就跑起来啦，GO!GO!GO!
Step1
Step2
Step3
Step4
PS：React Native命令所在路径，一般在npm目录下，要选中react-native.cmd而不要选中react-native，否则会报错。
最终成功啦
点击小三角就能运行了，console面板中也会有输出了。
- 新建React Native工程
可以用上文的方法 在终端执行react-native init XXX来创建，也可用WebStorm来创建。
File->New->Project->React Native->Loaction就是创建目录，需要新建一个文件夹，文件夹的名称就是工程的名称，Apply后，Terminal就开始创建了，可以发现和init是相同的过程，只不过更加方便地集成进来了。
运行测试
基本环境就算搭建完成了，那么我们来测试一下吧。
创建的工程是可以直接运行的。打开index.android.js可以看到里面有一些HelloWorld的代码。猜想一下，运行结果应该是手机屏幕上出现几行大小不同的字母。
讲手机连接到电脑，确保usb连接，调试等之后，点击Run小三角，Console开始输出，等待一会就能看到安装成功了。
PS：常见问题汇总
可以看到已经安装到手机上了，打开后发现要求一个悬浮窗的权限，必须打开，若未打开 去系统设置中打开该权限。
第一次运行的时候，会出现红屏，一大堆Error，弄了半天，看到这个整个人都不好了，是不是？是不是？别着急，摇晃一下手机，就会出现一个弹窗。选择Dev Settings,跳转到另一个页面。
摇晃后的弹窗
点击设置服务端地址和端口
设置地址和端口
这个步骤是让手机连接上调试服务器，也就是数据线连接的电脑，地址可以在cmd中ipconfig看到，默认端口8081。确定后，重新打开app，会发现顶部在加载东西，等待加载完成后，就能看见Welcome to React Native!等欢迎字样啦！
这样我们就和React Native世界中的Hello World见面啦！恭喜！
网友评论