React-Native项目之环境配置及调试中的bug

178 阅读3分钟

React-Native环境配置

主要针对Windows系统,以及Android设备调试

准备软件

  1. NodeJs安装包(Node版本要求:>=8.3) node下载
  2. Python安装包(版本要求:必须为Python2) Python2下载
  3. JDK软件(版本要求:>=8) JDK下载
  4. Android Studio安装包(默认为最新) Android Studio下载
  5. 夜神安卓模拟器 夜神模拟器下载

开始安装

  1. 下载好的NodeJs安装,建议直接默认路径。安装完毕之后,打开终端执行 node -vnpm -v命令,检查安装成功

    顺便执行命令npm install -g react-native-cli 或者yarn global add react-native-cli

  2. 安装Python,直接打开软件包,安装即可。

    配置环境变量:

    1. 打开命令窗口(cmd),输入path=%path%;C:\Python

      C:\Python是Python的安装目录

    2. 打开系统变量下面的path,添加;D:Python32;为英文状态

    3. 设置完成之后,在cmd命令行,输入python,有相应显示

      显示内容

      当然也可以通过Chocolatey来安装,由于之后软件比较大,使用该命令容易失败,暂不做详述。

  3. 安装JDK

    具体安装

    1. 建议默认路径安装,下一步式安装即可
    2. 环境变量配置
      1. 打开系统环境变量,设置3项属性,JAVA_HOME、PATH、CLASSPATH(大小写无所谓),若已存在则点击"编辑",不存在则点击"新建"。

        变量名:JAVA_HOME
        变量值:C:\Program Files (x86)\Java\jdk1.8.0_91

        要根据自己的实际路径配置

        变量名:CLASSPATH 变量值:.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;

        记得前面有个"."

        变量名:Path 变量值:%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;

    3. 测试JDK是否安装成功 运行cmd命令行,输入java -version、java、javac,显示以下信息,说明配置成功
      JDK配置成功
  4. 安装Android Studio 直接下一步安装即可,安装完成之后运行Android Studio

    1. 配置Android SDK,打开Configure,选择SDK Manager
      SDK Manager
    2. 打开SDK Tools,Show Packager Details,勾选需要的版本(28.0.3+),应用下载即可
      SDK Tools
    3. 配置ANDROID_HOME环境变量
      ANDROID_HOME
    4. 配置platform-tools
      platform-tools
      5.夜神安卓模拟器安装

      相比于Android Studio,推荐使用,安装简单,开发占用资源更少

RN项目开发

  1. 运行react-native init [项目名],安装项目
  2. 安卓模拟器调试
    1. Android Studio

      打开项目目录下的Android目录,运行AVD Manager,在项目中执行react-native run-android,即可运行在模拟器上。

      运行AVD Mnager,有的电脑会提示"VT-x is disabled in BIOS",如下图:

      VT-x
      解决办法:需要进入的电脑的BIOS中修改,重启电脑,进入BIOS页面(一般在开机时按Del或F2,根据电脑不同,进入方式不同),找到Advanced Mode –> Advanced –> CPU Configuration –> Intel Virtual Technology设置为Enabled(表示开启虚拟化)

    2. 夜神模拟器

      1. 更新nox_adb.exe文件,确保和sdk版本一致,将sdk的adb.exe复制到夜神安装处更名为nox_adb.exe替换原文件

        adb.exe文件位于SDK安装目录下面的platform-tools下, nox_adb.exe文件位于Nox安装目录下的bin下

      2. 项目和夜神模拟器连接。项目根目录下执行adb devices,查看连接设备,如果没有去夜神模拟器bin目录下,执行adb devices,重新开启后台程序。并在项目根目录下连接,执行adb connect 127.0.0.1:62001。运行项目react-native run-android
  3. 安卓真机调试
    1. usb线连接电脑,打开设置 > 系统 > 开发人员选项 > 打开usb调试。若没有开发人员选项,打开关于手机 > 版本号(连续点击)
    2. 项目根目录运行react-native run-android

      项目运行时报错,ADB Android Device Unauthorized

      1. 检查授权
        <ANDROID_SDK_HOME>\platform-tools>adb devices
        List of devices attached
        4df798d76f98cf6d        unauthorized
        
      2. 撤销USB调试授权

        安卓手机设置 > 系统 > 开发人员选项

      3. 重启adb服务
        adb kill-server
        adb start-server
        
      4. 重连设备 手机询问电脑同意连接,同意确认
      5. 检查设备 adb devices