创建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.hqwc.cn/news/139857.html

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

相关文章

CEC2013(MATLAB):狐猴优化算法(Lemurs Optimizer,LO)求解CEC2013(提供MATLAB代码及参考文献)

一、狐猴优化算法 狐猴优化算法&#xff08;Lemurs Optimizer&#xff0c;LO&#xff09;由Ammar Kamal Abasi等人于2022年提出&#xff0c;该算法模拟狐猴的跳跃和跳舞行为&#xff0c;具有结构简单&#xff0c;思路新颖&#xff0c;搜索速度快等优势。狐猴优化算法&#xff…

GMS地下水数值模拟及溶质(包含反应性溶质)运移模拟技术深度应用

以地下水数值模拟软件GMS操作为主要授课内容&#xff0c;在教学中强调模块化教学&#xff0c;分为前期数据收集与处理&#xff1b;三维地质结构建模&#xff1b;地下水流动模型构建&#xff1b;地下水溶质运移模型构建和反应性溶质运移构建5个模块&#xff1b;采用全流程模式将…

简单易学,让你拥有个性化的二维码

在数字化时代&#xff0c;二维码已经成为了我们日常生活的一部分。然而&#xff0c;大多数二维码都是简单而乏味的&#xff0c;缺乏个性和吸引力。这篇文章将向你介绍如何使用乔拓云等免费在线海报制作工具来制作艺术二维码&#xff0c;让你轻松掌握二维码的美化技巧。 1. 选择…

threejs(2)-Geometry进阶详解

一、全面讲解UV与应用 在本节中&#xff0c;我们将讨论Three.js中的UV映射&#xff0c;包括UV映射的概念、与顶点位置的关系和区别以及如何在Geometry中设置UV坐标。我们将使用BufferGeometry进行示例说明。 颜色对应 什么是UV映射&#xff1f; UV映射是一种将二维纹理映…

HTML代码中引入CSS样式的三种方式

1.内联样式: 使用style属性将CSS样式直接嵌入到HTML元素中.例如 2.内部样式表 3.引入外部样式

“岗课赛证”融通的物联网综合实训室建设方案

一、概述 随着5G技术的普及应用和产业经济的革新发展,物联网产业所呈现的广阔前景带来了对创新型技术技能人才的迫切需求。高职院校物联网专业建设也因此转变为面向国家战略性新兴产业发展需求。当前,“岗位课程竞赛证书”融通的培育理念,是高职院校物联网人才培养和专业优化的…

计网 七层网络模型

计网 七层网络模型 一.协议&#xff08;protocol&#xff09; 1.什么是协议 数据在网络中传输时按照的规则就是协议&#xff08;protocol&#xff09; 协议&#xff08;protocol&#xff09;规定了数据在网络中传输的顺序&#xff0c;格式&#xff0c;以及携带哪些内容 二…

【基于Kmeans、Kmeans++和二分K均值算法的图像分割】数据挖掘实验三

文章目录 Ⅰ、项目任务要求II、原理描述KMeansKMeans二分K均值评价指标-轮廓系数 III、数据集描述IV、具体实现过程V、结果分析VI、完整代码VII、深度学习与图片分割&#xff08;补充&#xff09;CNN1. 卷积层&#xff08;Convolutional Layer&#xff09;&#xff1a;2. 激活函…

五大场景告诉你,如何把iPaaS运用到实处

iPaaS&#xff08;Integration Platform as a Service&#xff09;是一种云计算服务模式&#xff0c;提供了企业系统和数据之间集成的平台。它具有以下应用价值&#xff1a; 1、整合系统服务&#xff1a;iPaaS可以将不同的系统和服务进行集成&#xff0c;促进数据的流动和共享…

SD/SDIO(1):SD总线协议介绍

SD标准提供了很大的灵活性&#xff0c;除了作为存储卡外&#xff0c;还提供了SD卡槽的标准来扩展设备的功能。本篇文章就先来介绍一下SD总线的规范。对于SD/MMC协议的发展历史和概念介绍&#xff0c;可以参考我的这篇文章&#xff1a;SD、SDIO和MMC接口基础和规范介绍 文章目录…

关注用户信息卡片

效果展示 CSS 知识点 box-shadow 属性回顾CSS 变量回顾 实现页面整体布局 <div class"card"><div class"box"><!-- 视频 --><div class"vide_box"><video src"user.mp4" type"video/mp4" aut…

音乐播放器蜂鸣器ROM存储歌曲verilog,代码/视频

名称&#xff1a;音乐播放器蜂鸣器ROM存储歌曲 软件&#xff1a;Quartus 语言&#xff1a;Verilog 代码功能&#xff1a; 设计音乐播放器&#xff0c;要求至少包含2首歌曲&#xff0c;使用按键切换歌曲&#xff0c;使用开发板的蜂鸣器播放音乐&#xff0c;使用Quartus内的RO…