WIN10下搭建react-native开发Android环境

最近公司要求使用react-native进行移动端开发,据说macOS上开发坑会少的多,但我们是windows,莫法,直接抗吧!周末配置环境遇到很多问题,谨以此文做个记录。。。

准备

  • 安装Chocolatey

    Chocolatey是一个Windows上的包管理器,类似于linux上的yum和 apt-get

    • 管理员的身份来运行命令提示符
      • 打开C盘里的Windows\System32,找到cmd.exe,右键‘已管理员身份运行’
    • 运行@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin
  • 使用chocolatey安装Python 2
    choco install python2
  • 使用chocolatey安装Node
    choco install nodejs.install
  • 切换npm到淘宝的镜像
    npm config set registry https://registry.npm.taobao.org --global
    npm config set disturl https://npm.taobao.org/dist --global
  • 使用npm安装Yarn和React Native

    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
    • 安装完yarn之后就可以用yarn代替npm了,例如用yarn代替npm install命令,用yarn add 某第三方库名代替npm install --save 某第三方库名

Android Studio

Android Studio包含了运行和测试React Native应用所需的Android SDK和模拟器。

  • 直接去http://www.android-studio.org/下载3.0.1.0的就可以了
  • 直接默认安装就可以了
  • 然后打开,点击右下角的configure配置
    WIN10下搭建react-native开发Android环境

  • 3个东西必须安装,其他随意,Android SDK Platform 2323.0.1Android Support Repository
  • 另外记住你Sdk的安装位置,后面有用,我是安在D:\Android\Sdk
    WIN10下搭建react-native开发Android环境

WIN10下搭建react-native开发Android环境

WIN10下搭建react-native开发Android环境

  • 设置ANDROID_HOME环境变量
    • 打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建用户变量
    • 变量名ANDROID_HOME,变量值D:\Android\Sdk(这是我的,具体看你的sdk位置)
    • 设置完需要关闭所以的命令符窗口,这样新的环境变量才能生效

      JAVA

  • Android Studio需要Java Development Kit [JDK] 1.8(暂不支持更高版本)
  • http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html下载
  • 根据自己选择32位还是,64
    WIN10下搭建react-native开发Android环境

  • 安装
    • 在D盘新建一个java文件夹,在java文件下新建两个文件夹,分别命名为jdk和jre.3.双击程序进行安装,安装时有两次选择路径的机会,第一次是让你选择jdk安装路径,选择为D:\java\jdk,第二次是让你选择jre的安装路径,选择为D:\java\jre
    • 安装完成后,进行环境变量的配置,计算机右击属性,-高级系统设置-环境变量-选择下边的系统变量
    • 新建
      变量名:Path
      变量值C:\ProgramData\Oracle\Java\javapath;%java_home%\bin;%java_home%\jre\bin
    • 新建
      变量名:JAVA_HOME
      变量值:D:\java\jdk
    • 新建
      变量名:ClassPath
      变量值:.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;
    • 测试
      • 打开cmd,输入java
      • 输入java -version

        连接真机

  • 自己用的小米6来连接的,没用模拟器,坑多的1匹,慢慢道来
    • 必须关闭MIUI优化
    • 360助手必须卸了,否则端口占用
    • 选择文件传输(MTP)
    • 打开“USB安装”选项
    • 以上都可能导致小米4以上机型跑不起来。。。

      运行

  • 连接好了手机我们就可以跑项目了
  • cmd
  • d: 请不要在命令行默认的System32目录中init项目!会有各种权限限制导致不能运行!所以我跑去D盘安的项目
  • react-native init rntest
  • cd rntest
  • react-native run-android
  • 好了,手机终于可以看见 welcome to react native了,恭喜。。。

最后

大家好,这里是「 TaoLand 」,这个博客主要用于记录一个菜鸟程序猿的Growth之路。这也是自己第一次做博客,希望和大家多多交流,一起成长!文章将会在下列地址同步更新……
个人博客:www.yangyuetao.cn
小程序:TaoLand

上一篇:定义了重复的“system.web.extensions/scripting/scriptResourceHandler”节


下一篇:如何部署用.net framework 4.5 写的wcf