首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

尽管在packages.json中更改了React-Native依赖项,但React-Native不会更新

React-Native是一个用于构建跨平台移动应用的开源框架。它基于React和JavaScript,并允许开发人员使用相同的代码库来创建iOS和Android应用程序。

当我们在packages.json中更改React-Native的依赖项时,React-Native本身不会自动更新。这是因为React-Native的版本是由我们在项目中使用的特定版本决定的。如果我们更改了依赖项,我们需要手动运行一些命令来更新React-Native。

以下是更新React-Native的步骤:

  1. 首先,我们需要确保我们已经安装了React-Native的命令行工具(react-native-cli)。如果没有安装,可以使用以下命令进行安装:
代码语言:txt
复制
npm install -g react-native-cli
  1. 然后,我们需要进入我们的项目目录,并运行以下命令来更新React-Native的依赖项:
代码语言:txt
复制
npm install

这将根据我们在packages.json中定义的依赖项来安装所需的React-Native版本。

  1. 接下来,我们需要重新链接我们的原生模块。运行以下命令:
代码语言:txt
复制
react-native link

这将确保我们的原生模块与新的React-Native版本保持同步。

  1. 最后,我们可以重新启动我们的应用程序,以确保更新生效。运行以下命令:
代码语言:txt
复制
react-native run-android

代码语言:txt
复制
react-native run-ios

这将重新构建并运行我们的应用程序,并使用新的React-Native版本。

总结起来,尽管在packages.json中更改了React-Native的依赖项,React-Native本身不会自动更新。我们需要手动运行一些命令来更新React-Native,并确保重新链接原生模块和重新启动应用程序。这样才能使更改生效。

腾讯云相关产品和产品介绍链接地址:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

🧭 React Native 版本升级指南

(记得删掉) 理清一个技术产品的生命周期后,你就会对日常开发配置文件有了整体的认知:那些又臭又长的配置,乱七八糟的兼容写法,毫无美感的 DSL,最神奇的是这些七拼八凑的东西还能把项目跑起来,Build...大家可以花点儿时间把每个配置都加上注释,这样升级改动过程中就不容易发怵。...值得注意的是,react-native-webview 一次更新为了响应 App Store 政策,已经移除了 UIWebView,只支持 WKWebView。...iOS目录变化 2️⃣ 修改 Header Search Path 上一步修改了 React Native 项目的引用方式,还有一个问题,那就是寻址的头文件路径并没有修改过来,我们可以观察下面两张图:...AndroidX 概览 迁移到 AndroidX Android AndroidX 的迁移 迁移工作主要是修改 import 路径,工作量可能有些大,心理负担较小,本质上就是改了个名字,问题不大。

4.4K20

ReactJS和React-Native的主要区别在哪里

React-Native有你需要的一切,你很可能不再需要其他依赖。当你开始新项目时,你会注意到它很容易配置: 它非常快而且只需要在命令行工具运行一行命令就可以开始项目了。... ); } } 由于您的代码不会在HTML页面呈现,这也意味着您将无法重用以前使用的ReactJS使用任何类型的HTML,SVG或Canvas的库...的样式表示例 我不知道你,即使Flexbox已经有一段时间了,我从来没有完全沉浸于其使用,主要是因为我涉及的项目需要与旧版浏览器的向后兼容性。...假设你可以控制你的应用程序的外观和行为,你有两个选择: 您可以为应用程序定义通用设计,使其两个平台上看起来完全相同,只要它保持直观,并不会混淆平台用户。...我建议您将组件的主要逻辑定义一个名为index.js的文件,然后您将使用单个文件定义演示组件。

17K30
  • React Native 的未来与React Hooks

    先说我对跨平台的理解: 一套逻辑可以多个平台运行,更多是避免各平台业务逻辑不统一,而对工作量的减轻是不明显!不明显!不明显的! 同时一个企业项目大了之后,一般也不会局限于一个框架之内。...同样携程的项目中: 《携程开源RN开发框架CRN》 文章也表示第一时间更新到了 0.59.x 版本,现在还会觉得 React-Native “要凉” 了嘛?...二、React-Native 0.59.x 选择升级版本之前,我们需要了解 React-Native 版本是有 0.A.B 的大 A 小 B 版本号设定,而在 React-Native 使用过程我的一个感受就是...结果如预期一般并不顺利,而一般 React-Native 的版本升级,带来的问题主要有三类: 1、官方 API 的调整 : 一般这类问题都比较好解决,官方的更新文档也有详细说明,这次升级主要是将原本...modal 插件使用了 BackAndroid ,虽然作者也更新了插件做兼容,但是···· 更新了插件之后,重新运行后却依旧报错?

    3.8K30

    从Android到React Native开发(一、入门)

    方便的热更新。 当然,React Native的坑也不在少数: 尽管是跨平台,但是不同平台Api的特性与显示并不一定一致。 相对增大了app的体积。 调试’相对‘麻烦。...Webstrom 简单配置 React Native 开发环境配置 2、项目理解  React Native创建工程,是通过命令终端输入 react-native init 你的项目名字 来创建工程的...install之后,库的依赖信息,自动被写到package.json里面,对应的库也会被下载到node_module文件夹,类似android studio依赖后把aar同步到本地。...[package.json]  node_module是一个忽略文件,提交的时候不需要提交到git上,类似android studio远程依赖下来的aar,也不会提交到git上。...5)编译调试  编译其实很简单,android其实就是项目的根目录终端输入react-native run-android就可以编译安装,IOS本人习惯是,通过点击ios文件目录下的xcodeproj

    1.2K20

    从Android到React Native开发(一、入门)

    方便的热更新。 当然,React Native的坑也不在少数: 尽管是跨平台,但是不同平台Api的特性与显示并不一定一致。 相对增大了app的体积。 调试’相对‘麻烦。...Webstrom 简单配置 React Native 开发环境配置 2、项目理解 React Native创建工程,是通过命令终端输入 react-native init 你的项目名字 来创建工程的,...install之后,库的依赖信息,自动被写到package.json里面,对应的库也会被下载到node_module文件夹,类似android studio依赖后把aar同步到本地。 ?...package.json node_module是一个忽略文件,提交的时候不需要提交到git上,类似android studio远程依赖下来的aar,也不会提交到git上。...5)编译调试 编译其实很简单,android其实就是项目的根目录终端输入react-native run-android就可以编译安装,IOS本人习惯是,通过点击ios文件目录下的xcodeproj文件

    1.2K20

    React-Native 通用化建设与性能优化

    1目设置通用化入口,实现React-Native项目上线的弱客户端依赖;(更新离线包即可,同时后台tnow串下发url字段,这里如果稳定,客户端也可以一律写死,不根据url来下发字段) 版本自由切换:...要实现react-native bundle本地分包,我们要做到依赖引用(业务包去 require 基础包的模块),因此我们需要把基础包包含的模块列表导出来给业务包打包时使用。...以下为已实现的react-native bundle本地分包方案的主要思路: 用户访问react-native view时,客户端检索到离线包的业务包bundle文件以后后与基础包文件进行简单的合并...的分离 React Native项目线上性能分析 以下为短视频react-native项目的线上数据,主要从首屏时间、cpu、内存以及crash率等方面和h5目进行对比 通过对比可以发现,react-native...所以若应用ListView 的子项数量特别多,ListView 滑动过程内存会逐渐上涨,离开react-native-view后内存也不会快速释放,所以就是出现之前内存测量的奇怪问题 而listView

    5.1K00

    React NativeAndroid当中实践(五)——常见问题

    3、飞行模式关闭 4、cmd输入 adb reverse tcp:8081 tcp:8081,结果如下: ?...总的来说,一个对于底层技术依赖不多,业务型,尤其是业务变动频繁的应用或模块适合 RN 开发,而且一次开发,基本可以完全重用于两个平台,重要的是可以热更新来应对业务逻辑更新频繁、更新要求快、迅速修复线上...无需编译,我第一次编译了ipa装好以后,就再也没更新过app,只要更新云端的js代码,reload一下,整个界面就全变了。...这样设计也会带来一些问题,后面说。 点按操作也被抽象成了一组组件(TouchableXXX),这种抽象方式是我之前做类似工作没有想到的。...修改了js以后,通过内建的nodejs watcher编译成bundle,模拟器里面按cmd+r就可以看到效果。

    2.4K20

    React Native简介和环境配置

    Native有更合适的线程模型,尽管Web Worker可以解决一部分问题,如图像解码、文本渲染仍无法多线程渲染,这影响了Web的流畅性。...OS X 10.11(El Capitan)版本,homebrew安装软件时可能会碰到/usr/local目录不可写的权限问题。...虽然一般来说命令行工具都是默认安装了,你最好还是启动Xcode,并在Xcode | Preferences | Locations菜单检查一下是否装有某个版本的Command Line Tools...你也可以Nuclide打开AwesomeProject文件夹 然后运行,或是双击ios/AwesomeProject.xcodeproj文件然后Xcode中点击Run按钮。...iOS Emulator按下⌘-R就可以刷新APP并看到你的最新修改! 完成了! 恭喜!你已经成功运行并修改了你的第一个React Native应用。

    1.5K20

    React Native学习笔记(1) 环境配置,项目结构,开发环境结构

    server react-native start 启动android react-native run-android 启动ios react-native run-ios 开发环境的组成 一个node.js...的开发服务器,开发阶段,我们的电脑上需要开启这个web服务,以使得模拟器可以显示内容。...当我们更改了js源代码后,也能及时的模拟器里看到。 模拟器设备,就是我们开启的Android或者IOS虚拟机 jsBundle 开发者写的源代码打包而成,开发阶段更改js文件会自动更新到模拟器。...网上还有一些“热更新”的方案。 ? 开发环境的组成 项目结构 ?...: react-native start 启动服务 执行 react-native run-android 启动android ,稍等片刻就可以Android模拟器里看到页面了

    1.1K00

    React-Native 20分钟入门指南

    React-Native出现之前移动端主流的开发模式是原生开发和Hybrid开发(H5混合原生开发),Hybrid app相较于native app的优势是开发成本低开发速度快(H5页面开发跨平台,无需重新写...web、android、ios代码),尽管native app开发上需要更多时间,但却带来了更好的用户体验(页面渲染、手势操作的流畅性),也正是基于这两点Facebook2015年推出了React-Native...React-NativeGithub的Star数 React-Native的npm下载数 上面两张图展示了React-Native的对于开发者的热门程度,且官方对其的开发状态一直更新,这也是其能抢占原生开发市场的重要因素...搭建开发环境 创建项目前我们需要先搭建React-Native所需的开发环境。...命令创建一个名为HelloReactNative的项目 react-native init HelloReactNative 等待其下载完相关依赖后,运行项目 react-native run-ios

    3.4K10

    那些React-Native踩过的的坑

    从学React-Native开发功能模块大概5天,有些体会:1如果说按产品原型去做一样东西,那是容易的,但是这会造成很多问题,第一个是机器人一样写代码,你不会从项目整体思考,代码的质量也比较差而且不容易维护...后面听了技术老大的说封装这个定时器组件,这里涉及到react-native底层原理,因为放在整个item的布局的话,每次更新时间其实是用diff算法计算这次的virtual dom与上次的virtual...dom不同之处,如果不一样更新不同的地方,而如果item的布局比较复杂的话,计算会比较耗时,但是如果封装到组件如果更新时间只需要计算很简单的virtual...0x03 关于state的实用用法   react-nativestate代表动态改变值的状态,如何应用到开发是一个关键点?  ...ListView加载数据细节     页面中经常会有上拉加载数据的情况,若使用 image.png     那时候弄的页面比直接使用 image.png 快2.5秒左右,尤其是页面item布局复杂的话效果明显

    1.9K90

    从0到1打造一款react-native App(一)环境配置

    目前个人的状态是node.js会一点点点点,koa2不会react-native不会(在这几个技术栈里算零基础吧)。但是没事,我就喜欢从什么都不会开始做,这样才好玩,不说废话了。开始!...java jdk 因为是跑安卓,所以需要依赖java,虽然现在安卓官方语言改成Kotlin了,但是好像也不怎么关我的事。。下载最新的java即可,下载地址。...终于下载好了,安装时需要选择路径,开始自定义了路径,结果到后边运行程序时一直报错sdk location not found,明明环境变量也配置过了,还是没解决问题,网上找了2个解决办法,也不靠谱,最后无奈又重新安装了一遍...此时Android Studio配置全部完成,然后需要在环境变量当中加入 环境变量中新建ANDROID_HOME,值就是当时安装sdk的路径。...中途可能会卡到某一,下载不动,多等几分钟,如果还不行,就只能重新下载了,我也是下载了两次才下好。完成后会显示BUILD SUCCESSFUL。

    1.5K40

    dependencies与devDependencies的区别

    npm install安装node模块时,有两种命令参数可以把它们的信息写入package.json文件。 –save –save-dev 那二者的区别在哪里呢?...name": "Demo", "version": "0.0.1", "private": true, "scripts": { "start": "node node_modules/react-native.../local-cli/cli.js start", "test": "jest" }, "dependencies": { "react": "~15.4.1", "react-native..." } } devDependencies下列出的模块,是我们开发时用的依赖,像一些进行单元测试之类的包,比如grunt-contrib-uglify,我们用它混淆js文件,它们不会被部署到生产环境...dependencies下的模块,则是我们生产环境需要的依赖,即正常运行该包时所需要的依赖。 如果执行npm install命令,默认会安装两种依赖

    2.2K50

    新版React Native 混合开发(iOS篇)

    将React Native集成到现有的iOS应用需要如下几个主要步骤: 首先,你需要有一个React Native项目; 为已存在的iOS应用添加React Native所需要的依赖; 创建index.js...Native依赖RNHybridiOS目录下创建一个Podfile文件(如果已经添加过可跳过): pod install 然后,我们Podfile文件添加如下代码: # Uncomment the...此过程细致的讲解可查阅:React Native与iOS 混合开发讲解的视频教程 4....打包 虽让,通过上述步骤,我们将RN和我们的RNHybridiOS项目做了融合,打包RNHybridiOS你会发现里面并不包含JS部分的代码,如果要将JS代码打包进iOS ipa包,可以通过如下命令...提示:如果在项目中使用了CodePush热更新,那么我们需要就可以直接通过CodePush来读取本地的jsbundle,方法如下: ...

    5.7K20

    React Native 混合开发(iOS篇)

    混合开发的一些其他应用场景: 原有项目中加入RN页面,RN项目中加入原生页面 ? 原生页面嵌入RN模块 ? RN页面嵌入原生模块 ?...将React Native集成到现有的iOS应用需要如下几个主要步骤: 首先,你需要有一个React Native项目; 为已存在的iOS应用添加React Native所需要的依赖; 创建index.js...Native依赖RNHybridiOS目录下创建一个Podfile文件(如果已经添加过可跳过): pod install 然后,我们Podfile文件添加如下代码: target 'RNHybridiOS...此过程细致的讲解可查阅:React Native与iOS 混合开发讲解的视频教程 4....打包 虽让,通过上述步骤,我们将RN和我们的RNHybridiOS项目做了融合,打包RNHybridiOS你会发现里面并不包含JS部分的代码,如果要将JS代码打包进iOS ipa包,可以通过如下命令

    8.3K50

    带你全面了解 Flutter,它好在哪里?它的坑在哪里? 应该怎么学?

    因为 react-native 是通过将 JS 里的控件转化为原生控件进行渲染,所以 rn 里的控件是需要依赖原生平台的控件,所以不同系统之间原生控件的差异,同个系统的不同版本控件上的属性和效果差异,...image react-native 开发生涯,就经常出现: iOS 上调试好的样式, Android 上出现了异常; Android 上生效的样式, iOS 上没有支持; iOS...从代码层面看,对于原生开发而言,响应式开发没有 xml 的布局,布局完全由代码完成,所见即所得,同时你也不会需要操作界面“对象”去进行赋值和更新,你所需要做的就是配置数据和界面的关系。... Flutter 也类似,当你通过这样的 ture 和 false 去布局时,是直接影响了 Widget 树的结构乃至底层的渲染逻辑,所以作为 Android 开发在学习 Flutter 的时候...当然具体展开这部分内容不是三言两语可以解释完,我出版的 《Flutter开发实战详解》 第三章和第四章就着重讲解的内容,也是这出版本书主要的灵魂之处,这部分内容不会因为 Flutter 的版本迭代而过时的内容

    1.6K20

    react-native常用终端命令

    001 更新react-native的node依赖包 请去下面的网址查看react-native的npm包的最新版本,或使用npm info react-native命令查看。...https://www.npmjs.com/package/react-native 打开项目目录下的package.json文件,然后dependencies模块下找到react-native,将当前版本号改到最新...,然后命令行运行(译注:如果提示权限错误,就在命令前加上sudo): $ npm install 译注:从0.24版本开始,react-native还需要额外安装react模块,且对react的版本有严格要求...本文无法在这里列出所有react native和对应的react模块版本要求,只能提醒读者先尝试执行npm install,然后注意观察安装过程的报错信息,例如require react@某.某.某版本...为了使老项目的项目文件也能得到更新(不重新init),你需要在命令行运行: $ react-native upgrade 004 npm info react和npm info react-native

    1.6K30

    React-Native私服热更新的集成与使用

    Google Play也允许热更新必须弹框告知用户更新中国的android市场发布时,都必须关闭更新弹框,否则会在审核应用时以“请上传最新版本的二进制应用包”驳回应用。...如果未指定,更新不会被禁用 [--rollout ] # 指定可以更新的用户百分百,取值1-100。...官方文档YOU_ACCESS_KEY的值是通过code-push access-key add "YOU_ACCESS_KEY"来的,通过实验发现此key无效。...版本号设计 系统维护一个版本号,开发者希望这个版本号能够反映出对应的二进制包的版本如2.2.0,同时亦能对应到热的版本号。...0.60之后是采用 CocoaPods 管理的相关依赖。 1. pod install 运行cd ios && pod install && cd ..以安装所有必需的CocoaPods依赖

    7.9K10

    如何同时运行多个React Native、8081端口占用问题

    从上述代码可以看出,我们启动react native服务的时候可以为它指定一个端口号: react-native start --port=8082 提示:上述代码,是2017年8月1号提交的一个...永久修改Server端口 要永久修改这个默认端口号,我们需要修改server.js文件,server.js所在位置,: 你的项目名称/node_modules/react-native/local-cli...第二步:修改iOS项目的端口号 改了React Native 服务的端口号之后,我们要需改iOS项目的端口号让它从新端口获取jsbundle,否则的话会出现No bundle URL present...第三步:修改Android项目的端口号 改了React Native 服务的端口号之后,我们要需改Android项目的端口号让它从新端口获取jsbundle,否则的话会出现No bundle URL...另外,如果你的项目是源码级依赖React Native的话,也可以通过修改AndroidInfoHelpers.java文件来完成对Android项目的端口的修改。

    2.7K30
    领券