使用 React Native CLI 创建项目

这篇具有很好参考价值的文章主要介绍了使用 React Native CLI 创建项目。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

需要掌握的知识点

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

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

安装 nodejs 和 JDK

choco install -y nodejs-lts microsoft-openjdk11

安装需要的开发工具

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

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

  • 选择Tools -> SDK Manager进入 SDK 选择页面
    使用 React Native CLI 创建项目,ReactNative学习笔记,react native,react.js,学习

  • 选择对应的 SDK 版本进行安装
    使用 React Native CLI 创建项目,ReactNative学习笔记,react native,react.js,学习

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

使用 React Native CLI 创建项目,ReactNative学习笔记,react native,react.js,学习

创建一个新应用程序

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

npm uninstall -g react-native-cli @react-native-community/cli

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

npx react-native@latest init myApp

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

npx react-native doctor

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

npm run android

项目成功编译后可以看到如下的页面:
使用 React Native CLI 创建项目,ReactNative学习笔记,react native,react.js,学习

安装过程中遇到的问题

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

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

  1. 使用react-native doctor命令后可以看到如下的错误:
    使用 React Native CLI 创建项目,ReactNative学习笔记,react native,react.js,学习
    第一个问题我们可以通过npm run android命令来解决,因为使用命令后,系统会自动启动对应的 ADB 程序

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

第四个问题主要是在Android SDK Build-Tools中选择安装对应的版本就可以解决文章来源地址https://www.toymoban.com/news/detail-629465.html

到了这里,关于使用 React Native CLI 创建项目的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • React Native expo项目使用expo-image-picker上传图片

     app.json: https://docs.expo.dev/versions/latest/sdk/imagepicker/      expo-image-picker 图片上传 要使用Expo的ImagePicker库进行图片上传,您可以按照以下步骤操作。 首先,确保您已在项目中安装了Expo的ImagePicker库。 然后,您可以使用以下代码来选择图片并上传: 此示例使用Button和Image组件创

    2024年02月15日
    浏览(35)
  • 【vue项目】vue项目创建全流程,创建使用 vue-cli 搭建项目

    一. 使用 vue-cli 搭建项目 1.安装vue/cli ,执行下面的命令安装或是升级 npm i -g @vue/cli 安装报错 ​ 如果安装报错如下 npm i -g @vue/cli 安装报错解决方案 ​ 查看vue版本 vue -V ,主要原因是安装vue的版本过低。 ​ 输入以下命令 ,可以强制覆盖以前旧版本的vue-cli脚手架。 ​ 执行完,

    2023年04月17日
    浏览(51)
  • 使用vue-cli创建vue2项目以及项目配置

    1、安装vue-cli cmd:npm install -g @vue/cli@4.5.19 验证是否安装成功:vue -v   出现版本号说明安装成功 2、创建项目 vue create 项目名称 根据自己的需求选择特性,如下所示: 手动选择: 选择自己需要的特性:例如: 选择vue版本 选择路由模式 (输入y和n都可以,y代表history模式没有

    2024年02月06日
    浏览(54)
  • 使用vue-cli创建第一个vue项目

    命令提示符切换至需要创建项目的目录: 直接在路径 输入cmd 在按键盘的 enter键 打开的终端就直接切换到该目录下 (1)输入以下命令: vue create 项目名称 (2)我这里选手动选择,键盘 上下 按钮,选完后按 enter键 (3)我这里选Babel和CSS,键盘 上下 按钮,选中或取消选中按

    2023年04月17日
    浏览(59)
  • 使用vue-cli脚手架创建vue项目

    0.vue cli安装 vue cli2安装 vue cli2卸载 vue cli3安装 key通过命令查看当前安装的vue cli的版本 1. vue init vue init 是vue-cli2.x的初始化方式,可以使用github上面的一些模板来初始化项目 webpack是官方推荐的标准模板名。 vue-cli2.x项目向3.x迁移只需要把static目录复制到public目录下,老项目的

    2024年02月11日
    浏览(70)
  • 创建React Native的第一个hello world工程

    需要安装好node、npm环境 如果之前没有安装过 react-native-cli 脚手架的,可以按照下述步骤直接安装。如果已经安装过的,但是在使用这个脚手架初始化工程的时候遇到下述报错的话 也可以先直接卸载 正常安装过程: 安装 react-native-cli 安装 react-native 安装完成之后,可以用脚手

    2024年02月07日
    浏览(46)
  • React Native自学笔记

    提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加 例如:第一章 Python 机器学习入门之pandas的使用 提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档 提示:这里可以添加本文要记录的大概内容: 例如:随着人工智能的不断发展,

    2024年02月05日
    浏览(48)
  • ReactNative 学习笔记

    学习使用的开发工具 编译器 VSCode 开发语言工具 TypeScript 重要程度分类 一般 这个程度的知识点主要是达到熟练掌握即可,不用太深入研究和学习。 重要 这个程度的知识点主要是达到熟练掌握,并且内部的原理切要熟记,因为会关联到其他的知识点。 非常重要 这个程度的知

    2024年02月13日
    浏览(41)
  • React Native Expo项目上传文件

              https://chat.xutongbao.top/ https://docs.expo.dev/versions/latest/sdk/document-picker/ https://blog.csdn.net/xutongbao/article/details/131981469?spm=1001.2014.3001.5501 

    2024年02月15日
    浏览(50)
  • Vue项目搭建及使用vue-cli创建项目、创建登录页面、与后台进行交互,以及安装和使用axios、qs和vue-axios

    目录 1. 搭建项目 1.1 使用vue-cli创建项目 1.2 通过npm安装element-ui 1.3 导入组件 2 创建登录页面 2.1 创建登录组件 2.2 引入css(css.txt) 2.3 配置路由 2.5 运行效果 3. 后台交互 3.1 引入axios 3.2 axios/qs/vue-axios安装与使用 3.2.1 安装axios 3.2.2 发送get请求: 3.2.3 发送post请求: 3.2.4 简化axio

    2024年02月07日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包