React Native windows完整开发环境搭建

*重要:请一步一步搭建环境 仔细看环境参数,不然可能遇到很多问题

一、下载安装Node, Python2, JDK(1.8版JavaSE 1.8版本SDK本)

二、配置JAVA 环境变量

  1. 找到系统环境变量
    env
  2. 新建JAVA_HOME系统变量
    变量名:JAVA_HOME ,变量值:C:\Program Files\Java\jdk1.8.0_171(这里填你自己选择的安装路径!!!)
    java_home
  3. 新建CLASSPATH变量
    变量名:CLASSPATH , 变量值: .;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar(注意最前面有一点)。
    classpath
  4. 配置系统环境变量Path
    双击Path-->新建-->添加“%JAVA_HOME%\bin”-->将这一行变量上移到最顶端-->完成
    path
  5. 应用
    所有环境变量配置完成之后,应用环境变量即可。
    apk

四、测试安装与配置是否成功

  1. win+R弹出运行窗口后,输入cmd
    cmd
  2. 回车弹出命令行窗口,分别输入"java -version"、"javac"
    test

 

三、下载安装开发工具 Android Studio (接下来安装和下载过程最要科学上网,不然可能会不顺利)

安装界面中选择"Custom"选项,确保选中了以下几项:

  • Android SDK
  • Android SDK Platform
  • Performance (Intel ® HAXM) (AMD 处理器看这里)
  • Android Virtual Device

然后点击"Next"来安装选中的组件。

如果选择框是灰的,你也可以先跳过,稍后再来安装这些组件。

安装完成后,看到欢迎界面时,就可以进行下面的操作了。

2. 安装 Android SDK

Android Studio 默认会安装最新版本的 Android SDK。目前编译 React Native 应用需要的是Android 9 (Pie)版本的 SDK(注意 SDK 版本不等于终端系统版本,RN 目前支持 android4.1 以上设备)。你可以在 Android Studio 的 SDK Manager 中选择安装各版本的 SDK。

你可以在 Android Studio 的欢迎界面中找到 SDK Manager。点击"Configure",然后就能看到"SDK Manager"。

Android Studio Welcome

SDK Manager 还可以在 Android Studio 的"Preferences"菜单中找到。具体路径是Appearance & Behavior  System Settings  Android SDK

在 SDK Manager 中选择"SDK Platforms"选项卡,然后在右下角勾选"Show Package Details"。展开Android 9 (Pie)选项,确保勾选了下面这些组件(重申你必须使用稳定的翻墙工具,否则可能都看不到这个界面):

  • Android SDK Platform 28
  • Intel x86 Atom_64 System Image(官方模拟器镜像文件,使用非官方模拟器不需要安装此组件)

然后点击"SDK Tools"选项卡,同样勾中右下角的"Show Package Details"。展开"Android SDK Build-Tools"选项,确保选中了 React Native 所必须的28.0.3版本。你可以同时安装多个其他版本。

最后点击"Apply"来下载和安装这些组件。

3. 配置 ANDROID_HOME 环境变量

React Native 需要通过环境变量来了解你的 Android SDK 装在什么路径,从而正常进行编译。

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建,创建一个名为ANDROID_HOME的环境变量(系统或用户变量均可),指向你的 Android SDK 所在的目录(具体的路径可能和下图不一致,请自行确认):

ANDROID_HOME Environment Variable

SDK 默认是安装在下面的目录:

c:\Users\你的用户名\AppData\Local\Android\Sdk

你可以在 Android Studio 的"Preferences"菜单中查看 SDK 的真实路径,具体是Appearance & Behavior  System Settings  Android SDK

你需要关闭现有的命令符提示窗口然后重新打开,这样新的环境变量才能生效。

4. 把一些工具目录添加到环境变量 Path 中

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量,选中Path变量,然后点击编辑。点击新建然后把这些工具目录路径添加进去:platform-tools、emulator、tools、tools/bin

%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\emulator
%ANDROID_HOME%\tools
%ANDROID_HOME%\tools\bin

 

 

五、初始化项目 

    1、 默认使用检查和卸载以前可能安装的react-nativenpm uninstall -g react-native-cli卸载掉它以避免一些冲突。

     2、npx react-native init AwesomeProject  初始一个AwesomeProject

    4、创建一个虚拟设备

        

      

4、进入AwesomeProject 跑android 命令 看你自己用的是yarn 还是npm 推荐yarn 速度更快 这一过程可能会持续一段时间

   

5、漫长等待终于成功了 重要请一步一步搭建环境不然会出很多问题

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章