React Native入门（一）之安装，环境搭建

介绍

最近需要了解一下React Native，所以第一步先搭建环境！
废话不多说，开始！
官网：https://facebook.github.io/react-native/
中文官网：http://reactnative.cn/
Github：https://github.com/facebook/react-native/
当然，了解一个新的东西，这些官方的东西是再好不过了，需要慢慢消化！

推荐阅读：写给移动开发者的 React Native 指南

安装

①安装Chocolatey

Chocolatey是一个Windows上的包管理器，类似于linux上的yum和 apt-get。
官网：https://chocolatey.org/
安装步骤，点击这里，官网上提供两种方式，一种是在CMD中，一种是在PowerShell中。
这里具体说一下在CMD中的安装：
首先我们需要用管理员身份去运行CMD命令行，如何使用管理员身份去运行CMD，可以参照下面这篇百度经验！
Win10怎么以管理员身份运行CMD命令提示符
然后，输入命令：

@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

敲回车，就会自动安装，并且配置环境变量。

当然，这个只是一个Windows下辅助安装软件的工具，下边的软件都可以去其官网下载！

②安装Python 2

注意目前不支持Python 3版本。
输入命令：

choco install python2

可能这时候会弹出一句：

FIPS Mode detected - run 'choco feature enable -n useFipsCompliantChecksums' to use Chocolatey.When FIPS Mode is enabled, Chocolatey requires useFipsCompliantChecksums feature also be enabled.

我也不知道干嘛的，照着做不就行啦！
输入choco feature enable -n useFipsCompliantChecksums，回车，这时就会显示useFipsCompliantChecksums可用了！

重新输入命令安装，之后会自动安装好，并配置好环境变量，这样就可以啦！

③安装NodeJS

输入命令：

choco install nodejs.install

就会自动安装好，并配置好环境变量！
然后呢，安装完node后建议设置npm镜像以加速后面的过程（或使用科学上网工具）。

这时需要npm命令，但是虽然环境变量配置了，但是当前CMD还不知道啊！所以，需要你关闭当前CMD，再重新打开！或者，输入命令：

refreshenv

这跟Linux中，配置完环境变量，输入source .bash_profile刷新，一个道理！

然后就可以使用npm命令了！

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

④安装Yarn、React Native的命令行工具（react-native-cli）

来到重头戏，主角登场！
Yarn是Facebook提供的替代npm的工具，可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。
输入命令：

npm install -g yarn react-native-cli

会自动安装好！
安装完yarn后同理也要设置镜像源：

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

安装完yarn之后就可以用yarn代替npm了，例如用yarn代替npm install命令，用yarn add 某第三方库名代替npm install --save 某第三方库名。

⑤安装Android Studio

这个就不用再多说了吧！

但是需要我们配置Android的环境变量。

具体路径，写你自己的就行！

其他

开启Gradle Daemon

开启Gradle Daemon可以极大地提升java代码的增量编译速度。
输入命令：

(if not exist "%USERPROFILE%/.gradle" mkdir "%USERPROFILE%/.gradle") && (echo org.gradle.daemon=true >> "%USERPROFILE%/.gradle/gradle.properties")

测试安装

react-native init AwesomeProjectcd AwesomeProjectreact-native run-android

3条命令，第一条在所在目录创建项目AwesomeProject，第二条切换到AwesomeProject目录，第三条运行为Android项目。

在执行react-native run-android的时候，主要有两个步骤：
①Start JS server
如果按照前边的步骤正常执行的话，开启JS server服务应该是不会有什么问题的！如图：

如果需要手动开启，在项目目录下，输入命令：

react-native start

之后，如果在浏览器中输入，
http://localhost:8081/index.android.bundle?platform=android
如果访问成功（出现一大堆代码，哈哈哈），那么恭喜你，服务已启动成功！
②编译生成APK，并安装到手机上！

需要注意的问题：
①你可以使用–version参数创建指定版本的项目。例如react-native init MyApp --version 0.39.2。注意版本号必须精确到两个小数点。
②我们在配置完环境之后，可能CMD中的当前目录为:C:\Windows\System32，我们需要切换到一个其他的目录，比如换到桌面上C:\Users\xxxxxx\Desktop，之后再执行命令init我们的项目，则项目就会创建在桌面上！否则会有各种权限限制导致不能运行！
③当前必须只能有一个机子连着电脑，无论是模拟器还是真机！
④在真机上运行时可能会遇到白屏的情况，请在设置中开启悬浮窗权限。

你以为这样就能Hello World了，还是太年轻啊…..!
JS服务开启了，悬浮窗权限也开了，不管怎么Reload，一直报错Couldn’t connect to the server!

根据下边的提示：
如果你使用数据线连着电脑的，输入命令：

adb reverse tcp:8081 tcp:8081

reload即可。

如果没有使用数据线连接，首先要确保，你的手机要和电脑处在同一个局域网下，然后晃动手机，弹出菜单，选择Dev Settings ---> Debug server host&port for device，在弹出的对话框中输入你电脑的IP：8081，点击确定，之后reload！

这样，wc，终于看到庐山真面目了！

2017/10/23更新：
在使用真机调试时，真的是一些国产ROM简直了，一直安装不上！（魅族，小米等），报错：

com.android.ddmlib.InstallException: Failed to install all...Error while uploading app-debug.apk : Unknown failure ([CDS]close[0]):app:installDebug FAILEDFAILURE: Build failed with an exception.* What went wrong:Execution failed for task ':app:installDebug'.> com.android.builder.testing.api.DeviceException: com.android.ddmlib.InstallException: Failed to install all

这个真不知道怎么解决！如果有知道的童鞋，望告知！
然后在stackoverflow上找到一个回答：
Unable to use real device for react development
可以参考一下！
①首先使用adb devices，查看当前连接真机的deviceId，
②然后使用命令react-native run-android --deviceId 你的设备id来进行安装。
不过，还是不能调试啊，当然算是在真机上运行了！

iOS环境搭建问题

2017.11.3更新
这两天摸索了一下iOS环境的搭建！
具体的步骤呢，安装官网一步一步来就行，没有什么要多说的！
最后在运行的时候react-native run-ios，报错了：

xcrun: error: unable to find utility "instruments", not a developer tool or in PATH

出现这个问题的原因就是xcode 开启模拟器找不到路径！
我们在mac 的app store里下载的xcode会默认安装在/Applications/Xcode.app下，
我们使用命令可以查看当前模拟器配置路径：
xcode-select -print-path
运行是/Applications，所以需要我们修改路径:
使用命令：

sudo xcode-select -s /Applications/Xcode.app/Contents/Developer/

即可！

2017.11.27更新
iOS端在模拟器上运行，没有什么大的问题，现在说一下在真机上运行报错的问题：
①bundle ID不能用
这种情况，随便修改修改，尝试一下就行了！
②签名问题
我们要在项目配置中的signing一项，选择一个development team，还要生成一个signing certificate！
需要注意的一点：我们项目对应的tests，也要对应的设置签名！否则一样报错！
③使用Chrome调试
对于iOS真机来说，需要打开 RCTWebSocketExecutor.m文件，然后将其中的“localhost”改为你的电脑的IP地址，最后启用开发者菜单中的”Debug JS Remotely”选项。

另外iOS9的原因只接受https协议！所以需要在Xcode info.plist里添加条件：

调试

这里说一下用的最多的使用Chrome开发者工具调试！就是谷歌浏览器F12！
在开发者菜单中选择”Debug JS Remotely”选项，即可以开始在Chrome中调试JavaScript代码。点击这个选项的同时会自动打开调试页面
http://localhost:8081/debugger-ui.

对于iOS真机来说，需要打开 RCTWebSocketExecutor.m文件，然后将其中的”localhost”改为你的电脑的IP地址，最后启用开发者菜单中的”Debug JS Remotely”选项。

对于Android 5.0+设备（包括模拟器）来说，将设备通过USB连接到电脑上后，可以使用adb命令行工具来设定从设备到电脑的端口转发：

adb reverse tcp:8081 tcp:8081

如果设备Android版本在5.0以下，则可以在开发者菜单中选择”Dev Settings - Debug server host for device”，然后在其中填入电脑的”IP地址:端口“。

修改项目

①使用你喜欢的文本编辑器打开index.android.js并随便改上几行
②按两下R键，或是用Menu键（通常是F2，在Genymotion模拟器中是⌘+M），或者摇一摇真机打开开发者菜单，然后选择 Reload JS 就可以看到你的最新修改。
③在终端下运行adb logcat *:S ReactNative:V ReactNativeJS:V可以看到你的应用的日志。这个是查看全部的日志！
如果要查看单独一个平台的日志：

$ react-native log-ios$ react-native log-android

推荐IDE

2017/7/14补充

关于开发工具的选择，我个人是比较推荐WebStorm的，为什么？因为我们平常一直使用Android Studio（只针对Android开发），而AS就是基于jetbrains下IntelliJ IDEA开发的，因此界面我们会无比的熟悉，而且现在WebStorm早已支持React Native，可以说是非常的方便了！
虽然这个不是免费的，只能使用30天，但是网上破解注册加汉化包一搜一大堆，这里就不给连接了！。。。。。。相信聪明的你可以的！

那么WebStorm怎么设置调试RN应用呢？

打开WebStorm，在右上方运行的小三角左边有个下拉框，点击编辑结构！（我这里是已经配置好的！）

然后在弹出页面中，点击左上方的加号，添加新配置，我们选择React Native，然后下边的配置会自动带出来，我们可以选择一个平台，然后给一个名称，保存即可！

就是这么简单！！！！！