window 配置react native 、Android Studio环境

原创
2018/02/02 17:48
阅读数 633

准备工作

  • 下载Android Studio,下载的过程中可以安装react native

安装react native

  • Chocolatey 是一个Windows上的包管理器,用于安装软件

    以管理员身份打开cmd,运行命令

      [@powershell](https://my.oschina.net/powershell) -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin
    
  • 安装 Python 2

      choco install python2
    
  • 安装 Node

      choco install nodejs.install
    
  • Yarn、React Native的命令行工具(react-native-cli)

    点击开始--所有程序--打开node的命令行工具(这一块命令都是在这里输入的喔)

    image

    配置node国内镜像(至于原因可以自己去科普一下,因为国内防火墙的原因~)

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

    安装 Yarn、React Native的命令行工具

      npm install -g yarn react-native-cli
    

    同理,设置镜像

      yarn config set registry https://registry.npm.taobao.org --global
      yarn config set disturl https://npm.taobao.org/dist --global
    
  • 初始化项目一个名字叫hulinhuaRNDome的项目

      react-native init hulinhuaRNDome
    

安装Android Studio

一般软件安装,有些选择点以截图,参考如下 安装的时候Android Virtual Device、Android SDK和Android Device Emulator请勾选上

输入图片说明

输入图片说明

输入图片说明

输入图片说明

输入图片说明

配置Android Studio

  • 安装完成后,在Android Studio的欢迎界面中选择Configure | SDK Manager

输入图片说明

  • 在SDK Platforms窗口中,选择Show Package Details

    这里解释一下:这里有Android8.0、Android7.0、Android6.0什么的是对应的Android的版本,其实这里配置sdk并不是每一个版本的sdk都要配置,主要是看你模拟器对应的安卓版本,每个版本要配置的基本上是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配置选项 Android6.0 的sdk配置大家尽量按着这个选项来,如果不确定的话,可以多选不要少选

    输入图片说明 输入图片说明 输入图片说明

  • 在SDK Tools窗口中,选择Show Package Details

    然后在Android SDK Build Tools中勾选Android SDK Build-Tools 23.0.1(必须包含有这个版本。当然如果其他插件需要其他版本,你可以同时安装其他多个版本)。然后还要勾选最底部的Android Support Repository.

    输入图片说明 输入图片说明

  • 在SDK Update Sites

    输入图片说明

配置ANDROID_HOME环境变量

点击我的电脑--属性--高级系统设置--高级--环境变量--新建

如下图,新建的变量名为ANDROID_HOME ,sdk ANDROID_HOME环境变量的值每个人都不一样,具体的路径在SDK Manager的Android SDK Location 中可以找到(图中已圈出)

输入图片说明

使用Android Studio 运行React Native项目

  • 打开Android Studio、选择Open an existing Android Studio project 打开项目/Android 目录

    注意,这里打开的是项目目录下的Android目录,不要打开错了 前面我已初始化生成了一个叫hulinhuaRNDemo的项目

    输入图片说明

    打开项目的时候会用一段时间初始化项目,进入项目后如下图:

    输入图片说明

    点击Install Build Tools 23.0.1 and sync project,等待安装完成后如下图就可以运行项目了

    输入图片说明

注意:第一次跑可能会遇到一些问题,可以关闭一下Android Studio,重新打开项目进入项目,因为第一次跑Android Studio会自动下载配置一些东西,再次进去的时候就好了(这次进入项目的时候可以点击左边的项目进入了,时间不会像第一次那么慢)

  • 再次进入项目

    输入图片说明

    再次进入项目是点击Android studio下面的Terminal终端,输入指令npm start,将本地服务器运行起来,在如上面一步一样,启动程序

    如果没有npm start启动本地服务器,项目起来后,模拟器会报错(一片红,提示没有连接到服务器)

    启动成功后模拟器如下图所示

    输入图片说明

    其实已经成功了,但是显示白色(有部分机子也会现实正常,不会出现白屏),解决方法是: 打开项目文件夹--Android--app--src--main,加入一个assets文件,该文件下载地址

    输入图片说明

    重新run

    输入图片说明

展开阅读全文
打赏
1
2 收藏
分享
加载中
更多评论
打赏
0 评论
2 收藏
1
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部