在macOS上创建一个RN项目

Jesse90s
1,216 阅读3分钟

准备工作

  1. Node.js® 是一个基于 Chrome V8 引擎 的 JavaScript 运行时，下载版本要 v12 以上
  2. 先安装Homebrew，参考《Homebrew的安装与使用》
  3. 使用Hombrew来安装Watchman，参考《安装Watchman》
  4. Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载，安装指令npm install -g yarn
  5. 安装JDK，参考《macOS上安装Java Development Kit》
  6. 如果你之前没有接触过 Android 的开发环境，那么请做好心理准备，这一过程相当繁琐。请万分仔细地阅读下面的说明，严格对照文档进行配置操作，参考《macOS下载、安装Android Studio》

安装react-native-cli

  1. 在你指定的项目目录下，输入指令react-native init AwesomeProject
  2. 继续下载
  3. 等待，等待，等待，等待，继续下载
  4. 继续下载
  5. 继续下载
  6. 继续下载
  7. 继续下载
  8. 继续下载
  9. 继续下载
  10. 继续下载
  11. 继续下载
  12. 继续下载
  13. 下载完成

RN项目目录简介

  • 在访达，打开AwesomeProject目录
  • 用VSCode打开AwesomeProject，index.js是入口文件

准备Android设备

你需要准备一台 Android 设备来运行 React Native Android 应用。这里所指的设备既可以是真机，也可以是模拟器。后面我们所有的文档除非特别说明，并不区分真机或者模拟器。Android 官方提供了名为 Android Virtual Device（简称 AVD）的模拟器。

这里使用Android模拟器

你可以使用 Android Studio 打开项目下的"android"目录，然后可以使用"AVD Manager"来查看可用的虚拟设备。

  1. 打开已经存在的项目
  2. 选择刚才RN项目下的android目录
  3. 稍等片刻
  4. 稍等片刻
  5. 如果报网址的错误，大概率是科学上网不稳定，请自行解决
  8. 稍等片刻
  9. 一分钟
  10. 六分钟
  11. 右下角查看下载详情
  14. 如果你刚刚才安装 Android Studio，那么可能需要先创建一个虚拟设备，使用"AVD Manager"来查看可用的虚拟设备，下面两个地方都可以进到AVD Manager
  15. 点击"Create Virtual Device..."
  16. 然后选择所需的设备类型并点击"Next"
  17. 然后选择Q API Level 29 image，点击Download下载
  19. 下载完成，点击Finish
  20. 点击Next
  21. 点击Finish
  23. 这里显示了我们刚才安装的模拟器，现在你应该可以点击虚拟设备旁的绿色三角按钮来启动它了，启动完后我们可以尝试运行应用
  27. 报错啦，莫慌

编译并运行 React Native 应用

  1. 确保你先运行了模拟器或者连接了真机，然后在你的项目目录中运行yarn android或者yarn react-native run-android
  2. 如果配置没有问题，你应该可以看到应用自动安装到设备上并开始运行。注意第一次运行时需要下载大量编译依赖，耗时可能数十分钟。此过程严重依赖稳定的翻墙工具，否则将频繁遭遇链接超时和断开，导致无法运行
  5. 回到VSCode中，尝试修改一下App.js页面里的代码
avatar
文章
阅读
粉丝