创建React Native的第一个hello world工程

创建React Native的第一个hello world工程

需要安装好node、npm环境

如果之前没有安装过react-native-cli脚手架的,可以按照下述步骤直接安装。如果已经安装过的,但是在使用这个脚手架初始化工程的时候遇到下述报错的话

cli.init(root, projectname);^
typeerror: cli.init is not a functionat run (c:\users\showbi\appdata\roaming\npm\node_modules\react-native-cli\index.js:302:7)at createproject (c:\users\showbi\appdata\roaming\npm\node_modules\react-native-cli\index.js:249:3)at init (c:\users\showbi\appdata\roaming\npm\node_modules\react-native-cli\index.js:200:5)at object.<anonymous> (c:\users\showbi\appdata\roaming\npm\node_modules\react-native-cli\index.js:153:7)at module._compile (node:internal/modules/cjs/loader:1105:14)at object.module._extensions..js (node:internal/modules/cjs/loader:1159:10)at module.load (node:internal/modules/cjs/loader:981:32)at function.module._load (node:internal/modules/cjs/loader:822:12)at function.executeuserentrypoint [as runmain] (node:internal/modules/run_main:77:12)at node:internal/main/run_main_module:17:47

也可以先直接卸载

npm uninstall -g react-native-cli

正常安装过程:

  1. 安装react-native-cli
npm install -g react-native-cli
  1. 安装react-native
npm install -g react-native

安装完成之后,可以用脚手架来初始化项目

npx react-native init firstRNProject

就会出现下述的界面

image-20231016110848723

安装编译到Android手机上去

react-native run-android

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

启动以后的界面如下所示:

Screenshot_2023-10-16-16-40-48-92_85a2c6e718c04c836aaa40a26ea60b9a

在这个过程中可能会遇到一些版本带来的问题,

  • 比如0.69的版本时候,会遇到上述脚手架初始化的时候报错,参考 https://github.com/facebook/react-native/issues/34055
    npx react-native init ProjectName --version 0.68.2 选择其他版本解决
  • ruby版本和gem版本不匹配的时候,报错日志信息Your Ruby version is 3.1.2, but your Gemfile specified 2.7.5
    参考 https://github.com/facebook/react-native/issues/35127
  • 启动后报错提示报错信息如下
    在这里插入图片描述
    参考https://github.com/facebook/react-native/issues/21530,清除缓存重新npm install安装新的依赖包解决
    react-native start --reset-cache
    react-native run-android

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/110135.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

WordPress导航主题蘑菇导航源码

蘑菇导航的列表页有两种风格&#xff0c;分别对应宽屏、窄屏。可以点击 文章。博客查看演示。文章页也是如此&#xff0c;这两种风格可以在后台设置。 本站菜单中的 VIP解析、音乐、图床&#xff0c;是单独的源码&#xff0c;不包含在本次主题中。后期看大家的要求&#xff0c…

SSH连接华为交换机慢

ssh连接交换机慢是因为交换计算密钥算法阶段默认使用安全性更高的秘钥&#xff0c;由于性能问题导致连接比较慢&#xff0c;如一台华为S5735S-L24T4S-QA2的交换机默认使用如下秘钥&#xff0c;安全行由高到低。 ssh server key-exchange dh_group16_sha512 dh_group15_sha512 …

【Release】Photoshop ICO file format plug-in 3.0

【Introduction】 The Photoshop ICO plug-in is a file format plug-in developed for Photoshop, which allows Photoshop to directly read and write ICO format files. Because Photoshop has powerful pixel bitmap editing functions, it has many users and a good us…

企业如何自定义人力资源和财务报表?

企业自定义人力资源和财务报表是一种重要的能力&#xff0c;它允许企业根据其特定需求和目标创建和定制报表。以下是一些详细的步骤和说明&#xff0c;帮助企业实现人力资源和财务报表的自定义。 1. 确定报表需求&#xff1a; 首先&#xff0c;企业需要明确自己对人力资源和财…

uniapp(uncloud) 使用生态开发接口详情5(云公共模块)

1.uniCloud官网 云对象中云公共模块: 网站: https://uniapp.dcloud.net.cn/uniCloud/cf-common.html // 官网介绍 cloudfunctions├─common // 云函数公用模块目录| └─hello-common // 云函数公用模块| ├─package.json| └─index.js // 公用模块代码&#xff0…

docker拉取镜像错误missing signature key

参考地址&#xff1a;docker拉取镜像错误 missing signature key-CSDN博客 linux系统&#xff0c;使用docker拉取的时候&#xff0c;报错如下 missing signature key 就一阵莫名其妙&#xff0c;之前还好好的&#xff0c;突然就不行了 按照网上说的方法&#xff0c;查看doc…

计算机网络-计算机网络体系结构-网络层

目录 一、IPV4 IP数据报格式 *IP 数据报分片 *IPV4地址 分类 网络地址转换(NAT) 二、子网划分与子网掩码 *CIDR *超网 协议 ARP协议 DHCP协议 ICMP协议 三、IPV6 格式 IPV4和IPV6区别 地址表示形式 四、路由选择协议 RIP(路由信息协议) OPSF(开发最短路径优…

探索DeFi世界,MixGPT引领智能金融新时代

随着区块链技术的迅猛发展&#xff0c;DeFi&#xff08;去中心化金融&#xff09;正成为金融领域的新宠。在这个充满活力的领域里&#xff0c;MixTrust站在创新的前沿&#xff0c;推出了一款引领智能金融新时代的核心技术——MixGPT。 MixGPT&#xff1a;引领智能金融体验的大型…

工业自动化编程与数字图像处理技术

工业自动化编程与数字图像处理技术 编程是计算机领域的基础技能&#xff0c;对于从事软件开发和工程的人来说至关重要。在工业自动化领域&#xff0c;C/C仍然是主流的编程语言&#xff0c;特别是用于工业界面(GUI)编程。工业界面是供车间操作员使用的&#xff0c;使用诸如Hal…

OFDM基本原理

一、OFDM简述 OFDM 的全称是 Orthogonal Frequency Divisition Multiplexing&#xff0c;是一种多载波调制技术&#xff0c;其能有效对抗频率选择性衰落&#xff0c;克服信号符号间干扰。OFDM的技术的核心思想是将宽频率载波划分成多个带宽较小的正交子载波&#xff0c;并使用这…

零基础学习CSS

01-CSS初体验 层叠样式表 (Cascading Style Sheets&#xff0c;缩写为 CSS&#xff09;&#xff0c;是一种 样式表 语言&#xff0c;用来描述 HTML 文档的呈现&#xff08;美化内容&#xff09;。 书写位置&#xff1a;title 标签下方添加 style 双标签&#xff0c;style 标签…

基于Java公益志愿捐赠管理系统设计与实现(源码+LW+调试+开题报告)

项目描述 临近学期结束&#xff0c;还是毕业设计&#xff0c;你还在做java程序网络编程&#xff0c;期末作业&#xff0c;老师的作业要求觉得大了吗?不知道毕业设计该怎么办?网页功能的数量是否太多?没有合适的类型或系统?等等。这里根据疫情当下&#xff0c;你想解决的问…

Android MediaCodec 框架 基于codec2

系列文章的目的是什么&#xff1f; 粗略&#xff1a; 解码需要哪些基础的服务&#xff1f;标准解码的调用流程&#xff1f;各个流程的作用是什么&#xff1f;解码框架的层次&#xff1f;各个层次的作用&#xff1f; 细化&#xff1a; 解码参数的配置&#xff1f;解码输入数…

WPF中在MVVM模式下实现导航功能

WPF中在MVVM模式下实现导航功能 一、利用TabControl 使用场景&#xff1a;项目小&#xff0c;不用考虑内存开销的问题。 实现方式1-手动指定ViewModel 分别定义3个UserControl作为View用于演示 <UserControl...><Grid><StackPanel Orientation"Vertic…

机器视觉、图像处理和计算机视觉:概念和区别

机器视觉、图像处理和计算机视觉&#xff1a;概念和区别 机器视觉、图像处理和计算机视觉是相关但有区别的概念。 机器视觉主要应用于工业领域&#xff0c;涉及图像感知、图像处理、控制理论和软硬件的结合&#xff0c;旨在实现高效的运动控制或实时操作。 图像处理是指利用…

竞赛 深度学习YOLO抽烟行为检测 - python opencv

文章目录 1 前言1 课题背景2 实现效果3 Yolov5算法3.1 简介3.2 相关技术 4 数据集处理及实验5 部分核心代码6 最后 1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 基于深度学习YOLO抽烟行为检测 该项目较为新颖&#xff0c;适合作为竞赛课…

ios UIDocumentPickerViewController 实现TEXT、DOC、PDF等文档读取

文章目录 一、前言二、iCould相关配置三、功能实现3.1 UIDocumentPickerViewController 选取控制器3.2 读取文件一、前言 最近正在研发的项目有一个需求: 允许用户将iCloud中的文档上传,实现文件的流转。 以前接触的项目对于资料类的上传大多是仅限于图片与视频。对于文档类…

网页构造与源代码

下载google浏览器 设置打开特定网址&#xff1a;www.baidu.com 查看网页或元素源代码 网页右键选择“检查”查看源代码 网页源代码 元素源代码

Yolov安全帽佩戴检测 危险区域进入检测 - 深度学习 opencv 计算机竞赛

1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; Yolov安全帽佩戴检测 危险区域进入检测 &#x1f947;学长这里给一个题目综合评分(每项满分5分) 难度系数&#xff1a;3分工作量&#xff1a;3分创新点&#xff1a;4分 该项目较为新颖&am…

轻重链剖分+启发式合并专题

Codeforces-741D(Arpa’s letter-marked tree and Mehrdad’s Dokhtar-kosh paths) 一棵根为1 的树&#xff0c;每条边上有一个字符&#xff08;a-v共22种&#xff09;。 一条简单路径被称为Dokhtar-kosh当且仅当路径上的字符经过重新排序后可以变成一个回文串。 求每个子树中…