react-native 搭建环境

移动开发 waitig 477℃ 百度已收录 0评论
  • Jdk 8-151(必须是这个版本,用jdk9 都不行 ,低了更不行)
  • Android sdk 4.3
  • 配置java 环境变量 javahome、classpath、path,配置Android 的环境变量 Androidhome ,path
  • 安装 node.js 8.9
  • 安装 visualbox 5.1 以上
  • 安装模拟器Genymotion
  • 在 Genymotion官网https://www.genymotion.com/account/login/ 注册一个账号,稍后在注册邮箱激活
  • 配置模拟器。选择Google Nexus 4 – 4.3 下载,下载好之后,会自动加载完成。
  • 配置模拟器。选择setting -ADB 配置sdk 路径
    这里写图片描述
  • 配置 环境变量 sdk %ANDROID_HOME%\platform-tools
  • 配置 环境变量 sdk %ANDROID_HOME%\tools

以上环境基本配置完成,点击start 运行模拟器,初次运行时间较长,如果运行成功,表示调试环境配置成功。
这里写图片描述
– 将sdk 路径下 的 platform-tools 文件夹下的 adb.exe 文件复制到 Genymotion 安装路径下的 tools 下,覆盖模拟器自带的 adb.exe。执行本操作是为了调试的时候可以用sdk启动模拟器,防止模拟器使用自己的adb连接。

  • 由于开发中所需的部分资源来源于国外,用npm直接安装的时候较慢,不过国内淘宝有一个资源镜像服务器可以使用,所以需要在node命令行中配置下载路径,
    在node命令行中执行 如下两条命令
   npm config set registry https://registry.npm.taobao.org  --global
   npm config set disturl https://npm.taobao.org/dist  --global
如图所示

这里写图片描述

  • 执行下边的命令 ,用yarn替换npm 命令,构建项目比原始npm更快。

    npm install -g yarn react-native-cli
  • 用淘宝的yarn 镜像替换原始的yarn 国外资源。

     yarn config set registry https://registry.npm.taobao.org  --global
     yarn config set disturl https://npm.taobao.org/dist  --global
  • 用yarn -v 命令测试一下,看yarn 是否替换成功,如果出现如下字样,表示成功。
    这里写图片描述

  • 用react native 命令测试 RN是否安装成功
    这里写图片描述

  • 在node 命令行下 执行 react-native init helloworld 命令,构建helloworld 项目
    这里写图片描述

  • 在node命令行 下 执行 adb devices 命令,连接模拟器

    这里写图片描述

  • 注意在首次配置时,进入任务管理器,查看adb 执行路径确实时RN 路径下的 adb
  • 然后启动模拟器
    这里写图片描述

  • 启动模拟器成功后,在setting 中打开usb 调试,在 about phone 中连续点击 build number
    这里写图片描述
    这里写图片描述

  • 启动成功后,执行 react-native run-android 启动项目

这里写图片描述
– 如果出现如下错误,表示RN本地服务没有打开,如果出现这个错误,查看环境变量中 path 是否添加C:\windows\system32,如果没有,则添加该变量

这里写图片描述


本文由【waitig】发表在等英博客
本文固定链接:react-native 搭建环境
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)