win7搭建React Native开发环境

参考资料：

官方英文：https://facebook.github.io/react-native/docs/getting-started.html
官方中文：http://reactnative.cn/docs/0.27/getting-started.html#content
经验参考：http://blog.youkuaiyun.com/zivensonice/article/details/51333039

1. 安装jdk、Android Studio
   官方建议jdk版本1.8+，实测1.7也可行
   Android Studio已更新到2.0+版本，建议下载自带sdk的安装包

2. 配置jdk、sdk环境变量

   • jdk环境变量配置不缀叙

   • 确保ANDROID_HOME环境变量正确地指向了你安装的Android SDK的路径
     

   • 将ANDROID_HOME配入Path系统路径
     %ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools

   ~以上是android开发所需环境，下面添加React Native开发环境~

3. 安装Chocolatey

   Chocolatey是一个Windows上的包管理器，类似于linux上的yum和 apt-get。 你可以在其官方网站上查看具体的使用说明。一般的安装方法是在命令行中输入：

   @powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin

   一般来说，使用Chocolatey来安装软件的时候，需要以管理员的身份来运行命令提示符窗口

4. 安装Python 2

   choco install python2

5. 安装Node

   choco install nodejs.install

6. React Native命令行工具（react-native-cli）

   npm install -g react-native-cli

   如果找不到npm命令，请cd到Node目录下运行

   如果是使用真机测试，开发环境已经搭好

项目测试

1. 下载及初始化项目

   react-native init AwesomeProject

2. 运行项目

   cd AwesomeProject
   react-native start

   

   • 在浏览器中打开http://localhost:8081/index.android.bundle?platform=android，如果得到以下页面，表示服务已经开启
     

   • 不要关闭上一个命令行，新开一个命令行工具，输入

     react-native run-android

     第一次运行因为没有配置Gradle所以会在线下载，比较慢
     如果运行报错，请再次确认环境变量，及Android studio中buildToolsVersion与项目中的一致（下载下来的项目buildToolsVersion “23.0.1”）

   • 如果是真机，第一次运行肯定会报错
     

   • 需要让手机和电脑处于同一个wifi网络下，然后设置端口信息 （摇一摇手机，或者按menu键）
     
     ip+8888端口

注意

• 有些Android手机，运行React Native成功后，只得到一个白屏，什么都没有，这是因为手机的悬浮窗口权限被禁止了，要先去设置页面打开