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

news2024/12/24 21:50:12

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

需要安装好node、npm环境

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

cli.init(root, projectname);
      ^
typeerror: cli.init is not a function
    at 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.coloradmin.cn/o/1098164.html

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

相关文章

FPGA中的LUT查找表工作原理。

在RAM中填入1110,后续的不同AB组合Y输出对应的值&#xff0c;实现上面逻辑表达式的功能。

windows编译ollvm笔记

准备工作 1.找到Android SDK目录配置好cmake环境变量 E:\AndroidSDK\cmake\3.18.1&#xff08;E:\AndroidSDK为 Android SDK目录地址&#xff09;。 下载llvm-mingw编译环境(gcc编译器的windows版本&#xff0c;即可以在windows平台上使用gcc编译器)&#xff0c;下载地址&…

Linux安装rpm包在线安装mysql5.7

以前安装过mysql 前言&#xff1a;检查以前是否装有mysql rpm -qa|grep -i mysql安装了会显示&#xff1a;   bt-mysql57-5.7.31-1.el7.x86_64 停止mysql服务和删除之前安装的mysql rpm -e bt-mysql57-5.7.31-1.el7.x86_64查找并删除mysql相关目录 find / -name mysql/va…

QT开发工业自动化控制软件的几个常用模块

最近两年一直从事工业自动化制造企业的软件开发&#xff0c;发现跟以前开发网络软件还是有较大的区别&#xff0c;重点就是在一些细的方面&#xff0c;比如架构、模块、通讯之类的。下面举几个例子&#xff1a; 1、数字键盘&#xff08;替代普通键盘的小数字键盘&#xff09; …

Jenkins 内存占用

查看内存占用 # ps aux | grep 9090 root 130854 0.0 0.0 8900 708 pts/1 S 16:23 0:00 grep --colorauto 9090 root 4010748 0.2 30.7 5826500 2502884 ? Ssl Oct13 8:55 /usr/bin/java -Djava.awt.headlesstrue -jar /usr/share/java/jenkins…

数据在内存中的存储(2)

文章目录 3. 浮点型在内存中的存储3.1 一个例子3.2 浮点数存储规则 3. 浮点型在内存中的存储 常见的浮点数&#xff1a; 3.14159 1E10 ------ 1.0 * 10^10 浮点数家族包括&#xff1a; float、double、long double 类型 浮点数表示的范围&#xff1a;float.h中定义 3.1 一个例…

C++基本语法【恩培学习笔记(一)】

文章目录 1、C程序结构1.1 C程序的基本组成部分1.2 预处理指令1.3 注释1.4 main() 主函数1.5 命名空间 namespace 2、 C的变量和常量2.1 变量2.2 变量的声明2.3 变量的类型 3、C 数组和容器3.1 数组&#xff08;array&#xff09;3.2 容器&#xff08;vector&#xff09; 4、C …

创建scala项目并增加新的object试运行

一、创建scala项目 依赖配置&#xff1a; scala&#xff0c;jdk&#xff0c;maven 没有maven也可以创建 1.1 直接创建 1.1.1 创建 选择新project 路径、依赖配置、代码调试 1.1.2 项目结构 Scala项目中几个文件&#xff1a; .idea&#xff1a;这个文件夹是用来存储项目的…

Android酒店客房预订系统 后台管理+前端app 包含视频教程

【项目功能介绍】 功能列表: 本系统包含后台管理和前端app双端系统, 本系统包含三个角色: 管理员,员工,app用户。 后台管理员的功能包含: 登录, 退出, ,酒店管理,添加酒店,修改酒店,禁用启用酒店; 酒店客房管理,添加客房,修改客房,启用禁用客房; 订单管理,确定订单,拒绝订单,用…

Android视音频知识

Android视音频知识 视音频完整解码播放流程分析。 视音频完整录制编码流程分析。 为什么要编码&#xff0c;如何编码(编码原理) ?。 为什么要编码&#xff1f; 因为视频文件实在太大了&#xff0c;一部电影 200多个GB&#xff0c;编码&#xff1a;1G 视频是连续的图像序列&a…

【Linux】chmod 命令使用

chmod&#xff08;英文全拼&#xff1a;change mode&#xff09;命令是控制用户对文件的权限的命令。 chmod命令 -Linux手册页 著者 作者&#xff1a;David MacKenzie和Jim Meyering。 语法 chmod [选项] [模式] 文件或目录 Linux/Unix 的文件调用权限分为三级 : 文件所有者…

Spring-AOP-加强

目录 简略介绍 AOP是如何实现的 实现时机 实现原理 简略介绍 AOP(Aspect-Oriented Programming)&#xff0c;即面向切面编程&#xff0c;用人话说就是把公共的逻辑抽出来&#xff0c;让开发者可以更专注于业务逻辑开发和IOC一样&#xff0c;AOP也指的是一种思想AOP思想是OO…

自动化测试框架中如何记录日志更加已读 ?一文介绍使用loguru来管理日志的心得。

只要做代码开发&#xff0c;记录日志必不可少的 &#xff0c;对于像我这样的测试开发同学也是 &#xff0c;你在编写自动化时如何记录日志 &#xff1f;怎么要日志记录更容易已读 &#xff1f;如何备份日志文件 &#xff1f; 这都是我们在编写代码时要考虑的问题 &#xff0c;如…

JNI 的数据类型以及和Java层之间的数据转换

JNI的数据类型和类型签名 数据类型 JNI的数据类型包含两种&#xff1a;基本类型和引用类型。 基本类型主要有jboolean、jchar、jint等&#xff0c;它们和Java中的数据类型的对应关系如下表所示。 JNI中的引用类型主要有类、对象和数组&#xff0c;它们和Java中的引用类型的对…

ICC2:如何抓取“no net“的shape和via

我正在「拾陆楼」和朋友们讨论有趣的话题&#xff0c;你⼀起来吧&#xff1f; 拾陆楼知识星球入口 pr过程中(尤其是eco)会产生一些no net的shape或via&#xff0c;它们会造成drc和lvs问题&#xff0c;但是常规的办法无法把他们抓出来&#xff0c;下面分享可以获取no net的方法…

数字化时代下,汽车行业如何突破现有营销困境?

之前三年的“口罩”时期&#xff0c;给全球和中国汽车市场带来不小影响&#xff0c;汽车销售市场整体下滑&#xff0c;传统营销模式很难适应现阶段汽车营销需求&#xff0c;那么在当下&#xff0c;汽车行业应该如何突破现有营销困境呢&#xff1f;接下来就由媒介盒子跟大家聊聊…

如何同步 Github 和 Gitee的仓库代码

一、从github导入仓库&#xff0c;手动同步 在 Gitee 的项目主页&#xff0c;导入的仓库会会有一个同步的按钮&#xff0c;你只用点一下&#xff0c;即可与 Github 同步更新&#xff0c;但是注意这里的同步功能默认是强制同步。有点麻烦的是&#xff0c;我们需要在推送到 Githu…

推理成本增加10倍?对文心大模型4.0的一些猜想

夕小瑶科技说 原创 作者 | 卖萌酱 大家好&#xff0c;我是卖萌酱。 相信不少小伙伴这几天都听到了消息&#xff0c;在期待下周即将发布的文心大模型4.0。我们的几个读者群里也发生了相关的讨论&#xff1a; 讨论的核心主要围绕以下两个话题展开&#xff1a; 文心4.0能不能打过…

git操作说明

SourceURL:file:///home/kingqi/桌面/git操作说明.doc 本地建立仓库 mkdir namebao cd namebao pwd git init 初始化 cd .git/ gedit config 本地存储 进入目录上传全部文件 git add . 提交 git commit -m “说明” 远程提交 复制gitee或者github仓库链接 可以直…

前端开发tips

vue配置启动项目自动打开浏览器 打开package.json找到启动命令npm run dev 跟npm run serve(这两种命令都可以) 后面增加 --open Vue项目设置路径src目录别名为 Vue2 编辑vue.config.js内容如下&#xff1a; const { defineConfig } require(vue/cli-service)const path…