React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的UI框架 React 在原生移动应用平台的衍生产物，目前支持iOS和Android两大平台。
RN的环境搭建在RN的中文社区有所介绍，但是对于小白来说还是有些太过简略了。RN中文社区详见参考，本文不涉及的问题也许在其中能够有所解答。
React Native思想
底层引擎是 JavaScript Core，但调用的是原生的组件而非 HTML5 组件。这样运行时可以做到与 Navive App 相媲美的性能体验，同时因为 JavaScript 代码可以使用后端强大的 Web 方式管理，既可以做到高效开发，也可以实现快速部署和问题热修复。
搭建开发环境（Windows）
React native目前支持三大平台（Windows、macOS、Linux）搭建开发环境，在此只介绍一下Windows下环境的搭建，其他平台可参照官方网站
- 1 Chocolatey
Chocolatey是一个Windows上的包管理器，类似于linux上的yum和 apt-get。 你可以在其官方网站上查看具体的使用说明。一般的安装步骤应该是下面这样：cmd以管理员身份运行
然后在其中输入：
@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin
- 2 Python 2
关闭之前的cmd，再次打开命令提示符窗口，使用Chocolatey来安装Python 2，输入：
choco install python2
- 3 Node
使用Chocolatey来安装NodeJS，输入：
choco install nodejs.install
安装完node后建议设置npm镜像以加速后面的过程，cmd中输入：
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
- 4 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 --global
yarn config set disturl https://npm.taobao.org/dist --global
- 5 Android Studio
Android Studio需要Java Development Kit [JDK] 1.8（暂不支持更高版本）。你可以在命令行中输入 javac -version来查看你当前安装的JDK版本。如果版本不合要求，则可以到官网上下载或者自行百度查找，配置好环境变量。
Android Studio包含了运行和测试React Native应用所需的Android SDK和模拟器（真机）
除非特别注明，请不要改动安装过程中的选项。比如Android Studio默认安装了 Android Support Repository，而这也是React Native必须的（否则在react-native run-android时会报appcompat-v7包找不到的错误）。
-
确定所有安装都勾选了，尤其是Android SDK和Android Device Emulator。
-
在初步安装完成后，选择Custom安装项：
-
检查已安装的组件，尤其是模拟器和HAXM加速驱动。
- 安装完成后，在Android Studio的欢迎界面中选择Configure | SDK Manager。
- 在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。
- 在SDK Tools窗口中，选择Show Package Details，然后在Android SDK Build Tools中勾选Android SDK Build-Tools 23.0.1（必须包含有这个版本。当然如果其他插件需要其他版本，你可以同时安装其他多个版本）。然后还要勾选最底部的Android Support Repository
- 接下来就可以搭建并测试第一个Android studio 项目了。new project
- 值得一提的是Android版本的，记得选择Android 6.0，之前选取的工具都是与之对应的。
- 选择empty activity
- Finish之后，就进入了漫长的项目配置过程，加载到项目后，还需初始化一些东西。在android studio底部可以看到。首次运行需要等待数分钟并从网上下载gradle依赖。（个时间可能耗时很久，也可能会不停报错链接超时、连接中断等等——取决于你的网络状况和墙的不特定阻断。总之要顺利下载，请使用稳定有效的科学上网工具。），你可以百度资源，所需的gradle包在gradle-wrapper.properties中，
- 下载完成后，把zip放置在gradle目录中，C:\Users\A\.gradle\wrapper\dists，一般在自己的磁盘下搜索 .grale就可以查到目录，这个目录最好先让android studio 自己生成好后，取消自己fetch文件，然后自己去下载好gradle-xxx-all-zip文件，放到对应的目录下：
- 例如我要3.3版本的放在C:\Users\Administrator\.gradle\wrapper\dists\gradle-3.3-all\55gk2rcmfc6p2dg9u9ohc3hw9下然后C:\Users\Administrator\.gradle\caches\3.3下，让android studio自己fetch ,这样的速度就快了.
- 配置完成后的大概目录是这样：
- 在右上角的
可以创建Android模拟器
- 点击
运行，选择模拟器或真机，运行成功如图。
Android studio主要还是提供React Native所需要的一些环境，RN开发我所用的是VSCode
- ANDROID_HOME环境变量
- 确保ANDROID_HOME环境变量正确地指向了你安装的Android SDK的路径。 打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建，方法同JDK。
- 6 Visual Studio Code
Microsoft的一款针对编写现代 Web 和云应用的跨平台源代码编辑器，做为我们的统一开发工具
你可以直接从官方网站下载安装
安装完VSCode之后，请安装Prettier, eslint, React Native Tools等插件
在用于React Native开发前，需要先在注册表中进行一些修改：
- 打开运行命令（按下Windows+R键/cmd）
- 输入
regedit.exe然后回车 - 在注册表编辑器中找到
HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Android SDK Tools条目 - 右键点击
Android SDK Tools，（如果没有找到，请右键wow6432node自行创建）选择新建 > 字符串值 - 名称设为
Path - 双击
Path，将其值设为你的Android SDK的路径。（例如C:\Program Files\Android\sdk）
测试安装：
cd到所需工作目录下，按如下指令：
react-native init AwesomeProject
cd AwesomeProject
react-native run-android
首次运行需要等待数分钟并从网上下载gradle依赖。（这个过程屏幕上可能出现很多小数点，表示下载进度。这个时间可能耗时很久，也可能会不停报错链接超时、连接中断等等——取决于你的网络状况和墙的不特定阻断。总之要顺利下载，请使用稳定有效的科学上网工具。）
运行完毕后可以在模拟器或真机上看到应用自动启动了。
如果apk安装运行出现报错，请检查上文中安装SDK的环节里所有依赖是否都已装全，platform-tools是否已经设到了PATH环境变量中，运行adb devices能否看到设备。
-
至此，应该能看到app红屏幕报错，这是正常的，我们还需要配置ip端口，让app正确访问pc端的packager服务。
-
一般运行完成的cmd窗口应该如图：
-
现在开始处理红窗问题（真机），首先确认你的手机和笔记本在同一网内，笔记本电脑可以通过热点与之相连，如：
-
真机请摇动你的手机或者menu键（Bluestacks模拟器按键盘上的菜单键，通常在右Ctrl的左边 或者左Windows键旁边），可以打开调试菜单，点击Dev Settings，选Debug server host for device，输入你的
正在运行packager的那台电脑的局域网IP加:8081（同时要保证手机和电脑在同一网段，且没有防火墙阻拦）【如我的192.168.137.1:8081（注意IP端口最后为1）】，再按back键返回，再按Menu键，在调试菜单中选择Reload JS，就应该可以看到运行的结果了。 -
附上最后的运行结果：
如果仍然为红窗，且报错：error: bundling failed: "Unable to resolve module `AccessibilityInfo` from `/Users/apple/WebstormProjects/carracing2/node_modules/react-native/Libraries/react-native/react-native-implementation.js`: Module does not exist in the module map\n\nThis might be related to https://github.com/facebook/react-native/issues/4968\nTo resolve try the following:\n 1. Clear watchman watches: `watchman watch-del-all`.\n 2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.\n 3. Reset packager cache: `rm -fr $TMPDIR/react-*` or `npm start -- --reset-cache`."
这个问题可能是新版本的bug,降级一下RN的版本
请用VSCode编译你的项目，删减和修改代码 package.json和app.js
h{
"name": "MyPr",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.2.0",
"react-native": "0.53.3"
},
"devDependencies": {
}
其他安装项
使用Git做为代码管理软件，Git是目前世界上最先进的分布式版本控制系统（没有之一）
你可以直接去Git for Windows官网下载。 在安装过程中注意勾选"Run Git from Windows Command Prompt"，这样才会把git命令添加到PATH环境变量中
- Visual Studio Emulator for Android
Visual Studio Emulator for Android)是利用了Hyper-V技术进行硬件加速的免费android模拟器。也是Android Studio自带的原装模拟器之外的一个很好的选择。而且你并不需要安装Visual Studio。