使用 React Native CLI 创建项目

React Native 安装的先决条件和设置

需要掌握的知识点

  • 掌握 JavaScript 基础知识
  • 掌握 React 相关基础知识
  • 掌握 TypeScript 相关基础知识

安装软件前需要首先安装Chocolatey。Chocolatey 是一种流行的 Windows 包管理器。

安装 nodejs 和 JDK

shell 复制代码
choco install -y nodejs-lts microsoft-openjdk11

安装需要的开发工具

  • VsCode
  • Android Studio(主要是用来安装虚 SDK 和安装虚拟设备)

使用Android Studio安装 SDK 和相关编译插件

  • 选择Tools -> SDK Manager进入 SDK 选择页面

  • 选择对应的 SDK 版本进行安装

  • 安装编译工具(使用react-native doctor命令后可以查看对应的版本)

创建一个新应用程序

如果您之前安装了全局 react-native-cli 包,请将其删除,因为它可能会导致意外问题:

shell 复制代码
npm uninstall -g react-native-cli @react-native-community/cli

React Native 有一个内置的命令行界面,您可以使用它来生成新项目。npx 您无需使用 Node.js 附带的全局安装任何东西即可访问它。让我们创建一个名为"AwesomeProject"的新 React Native 项目:

shell 复制代码
npx react-native@latest init myApp

运行之前首先使用npx react-native doctor命令检查相关依赖是否满足项目编译条件:

shell 复制代码
npx react-native doctor

我们使用虚拟设备来运行项目

shell 复制代码
npm run android

项目成功编译后可以看到如下的页面:

安装过程中遇到的问题

  1. 安装microsoft-openjdk11的时候安装失败

有时候microsoft-openjdk11安装包已经下载下来,只是安装的过程中由于权限或者其他问题导致安装失败。这样我们就可以具体看一下控制台打印出来的错误信息,找到microsoft-openjdk11下载的目录,进入到具体目录后进行安装。

  1. 使用react-native doctor命令后可以看到如下的错误:

    第一个问题我们可以通过npm run android命令来解决,因为使用命令后,系统会自动启动对应的 ADB 程序

第三个问题我是忽略,因为我已经安装了Android Studio,可能是环境的问题导致报错,而Android Studio只是帮我们管理对应的 ADB 和 SDK 等等一下环境,所以这里报错可以忽略

第四个问题主要是在Android SDK Build-Tools中选择安装对应的版本就可以解决

相关推荐
M78佐菲7 小时前
ARM学习笔记(1)
linux·arm开发·笔记·嵌入式硬件·学习
无敌贵点大王9 小时前
RTThread学习记录11——RT-Thread 设备模型吃透:UART/ADC/PWM/PIN 到底有什么区别?
c语言·stm32·学习·链表
狗狗狗狗狗乐啊11 小时前
搭一个 AI 对话工作台 AChat:从 0 到可用的完整记录(一)
python·react.js·ai编程
是翎11 小时前
深度长文|2026产品经理AI实践手册
人工智能·深度学习·学习·自然语言处理·数据挖掘
Linux-lucky11 小时前
32-38-Linux学习之旅之MySQL综合
linux·运维·学习·mysql·ubuntu
知识分享小能手12 小时前
C++ 学习教程,从入门到精通,C++ 入门知识 — 完整知识点(1)
开发语言·c++·学习
AI职业加油站15 小时前
数据要素价值释放年:大数据治理工程师,站上职业新风口
人工智能·学习·职场和发展·数据分析·职场发展
啄缘之间15 小时前
1.【SVA】什么是SVA?
经验分享·学习·测试用例·verilog·sva
sunoo-22916 小时前
【嵌入式裸机开发Day04】i.MX6ULL 蜂鸣器驱动详解:从引脚地址查找到代码实现全流程
arm开发·单片机·嵌入式硬件·学习·串口·裸机
Purple Coder16 小时前
stm32
学习