React Native入门详解--环境搭建

_光光
2,093 阅读4分钟

笔者在学习RN期间，因为网上的教程时间和版本原因很多规范也已经过时踩了不少坑。后来也是不断一路摸索，最终搭建成功。鉴于此打算记录下整个过程，尽可能的详解整个搭建过程以及在此期间出现问题的解决方案。

开始前的友情提示：

1、笔者使用的RN版本为：0.63
2、请以官方的文档为准，由于某些原因中文RN官网文档未能及时更新，可以查看下英文RN官网的文档

中文RN官网：reactnative.cn/
英文RN官网：reactnative.dev/

RN的环境配置

1、安装Node,版本必须在12以上

2、切换npm淘宝镜像源 用来加速下载后面的工程文件

  • nrm切换到淘宝镜像源：npx nrm use taobao
  • nrm切换到官方镜像源：npx nrm use npm

3、下载JAVA JDK1.8版本（这货也叫JDK8版本）

  • 注意事项：最好使用默认的安装路径，保存下来JDK的安装路径
  • 配置JAVA环境变量：右键我的电脑-属性-高级系统设置-环境变量 Snipaste_2021-03-10_22-59-44.png

Snipaste_2021-03-14_19-06-08.png

  • 依次添加以下变量
    • JAVA_HOME：JDK的安装路径 例如:C:\Users\wgz\AppData\Local\Android\Sdk
    • Path：%JAVA_HOME%\bin
  • 验证JAVA环境是否配置成功
    • 命令栏输入java
      Snipaste_2021-03-14_19-24-53.png
    • 命令栏输入java
      Snipaste_2021-03-14_19-25-16.png

4、下载 android studio 安装相关SDK

  • 注意事项：android studio会安装默认一些SDK，在此期间最好通过科学上网使用代理。否则可能会出现安装失败的情况

  • 进入SDK配置界面：android studio安装成功后，在初始化界面依次点击 Configure--SDK Manager 进入SDK的配置界面

    Snipaste_2021-03-14_19-36-22.png

    Snipaste_2021-03-14_19-40-55.png

  • 安装SDK组件

    • 进入"SDK Platforms"选项卡，点击右下角展示详情。安装 Android SDK Platform 29 和 Intel x86 Atom_64 System Image (官方模拟器镜像文件，使用非官方虚拟机可以不安装)
      Snipaste_2021-03-14_19-58-51.png

    • 进入"SDK Tools"选项卡，确保你安装了 Android SDK Build-Tools 的 29.0.2 版本，当然你也可以同时安装其他版本；安装 NDK 的 20.1.5948944 版本
      Snipaste_2021-03-14_20-04-14.png

  • 配置安卓环境

    • ANDROID_HOME：Android SDK的安装路径
      默认：C:\Users\你的用户名\AppData\Local\Android\Sdk，SDK配置界面顶部也有SDK的安装路径
    • Path：
      %ANDROID_HOME%\platform-tools
      %ANDROID_HOME%\emulator
      %ANDROID_HOME%\tools
      %ANDROID_HOME%\tools\bin Snipaste_2021-03-14_20-30-22.png Snipaste_2021-03-14_20-30-55.png

  • 检查安卓环境是否配置成功

    • cmd窗口输入 adb Snipaste_2021-03-14_20-35-11.png

RN的项目搭建

注意事项：

  • 1、项目路径不允许出现中文-
  • 2、不能使用如react、react-native、RN等关键字作为项目目录名

1、切换npm镜像源，创建RN项目

使用npm淘宝镜像源，尽量不要使用cnpm安装依赖。
切换npm淘宝镜像源：npx nrm use taobao
切换到官方npm镜像源：npx nrm use npm
创建RN项目：npx react-native init AwesomeProject

2、更改maven 镜像

项目创建成功后，初次运行需要安装编译所需以来为了确保 这些以来顺利下载我们需要更换maven 镜像。
找到AwesomeProject\android\build.gradle：
将所有：jcenter() 替换为 maven { url 'maven.aliyun.com/repository/…' }
将所有：google() 替换为 maven { url 'maven.aliyun.com/repository/…' }

3、使用真机调试运行服务

鉴于安卓自带模拟器性（站）能（五）差（渣），我们采用安卓手机真机调试

  • 1、通过USB接口用数据线连接手机，手机进入开发者选项 打开 USB调试 和 允许USB安装
  • 2、在CMD命令行输入 adb devices 让电脑与手机建立连接
  • 3、在RN项目中使用npm脚本运行服务：npm run android

耐心等待 如果没有问题 你将在手机上看到RN的hellow页面

4、你可能会遇到问题

  • 当遇到安装gradle-6.2-all失败时：
    • 1、手动下载 gradle-6.2-all，并将其放入AwesomeProject\android\gradle\wrapper文件夹中
      gradle-6.2-all网盘地址：链接:pan.baidu.com/s/1iaeaf7xR… 提取码:iqjm
    • 2、打开同文件夹下gradle-wrapper.properties，修改依赖的访问路径：distributionUrl=gradle-6.2-all.zip
      Snipaste_2021-03-14_21-35-25.png
  • 其他错误：
    • 有次笔者在自己电脑中项目成功跑起来了 但是在公司的电脑上一直报错，提示classpath有问题 后来经过检查发现别人教程中 maven 镜像地址已经被更换了，后来在RN官网找到新的地址就好了。所以有问题应该首先以官网的配置为准。
avatar
文章
阅读
粉丝