React-Native 十:版本升级

更新版本的React Native将会让你访问更多的APIs, 这样我们可以去使用更多的APIs,视图Views,以及开发者工具以及其他一些好用的东西。浏览版本更新日志就会发现整体FB官方开发进度还是非常紧张的,这样就很容易导致旧版本会出现不能用的情况,后期可能会出现不可预料的情况,这边建议大家尽量更新最新正式版本
我们大家都知道一个React Native项目使用Android项目,iOS项目和JavaScript项目三部分进行组成的,而且三者都关联打包在npm包内的,所以该项目版本进行更新是比较繁琐的。下面我来给大家讲解一下ReactNative项目的升级步骤。
一、查看当前版本
pengchengxiang@ubuntu:~/AwesomeProject$ react-native --version
react-native-cli: 0.2.0
react-native: 0.22.2
二、查看最新的版本
pengchengxiang@ubuntu:~/AwesomeProject$ npm info react-native
{ name: 'react-native','dist-tags': { latest: '0.25.1',next: '0.26.0-rc' },versions:
   [ '0.0.0','0.0.5',... ... 
     '0.24.1','0.25.0-rc','0.25.1','0.26.0-rc' ],maintainers:
  ... ... 
  dist:
   { shasum: '4177e70e56281cec8fb5fe76218bf6606eeb34b8',tarball: 'https://registry.npmjs.org/react-native/-/react-native-0.25.1.tgz' },directories: {} }
三、升级依赖的版本
pengchengxiang@ubuntu:~/AwesomeProject$ npm install --save react-native@0.25.1

> bufferutil@1.2.1 install /home/pengchengxiang/AwesomeProject/node_modules/react-native/node_modules/ws/node_modules/bufferutil
> node-gyp rebuild

make: Entering directory `/home/pengchengxiang/AwesomeProject/node_modules/react-native/node_modules/ws/node_modules/bufferutil/build'
  CXX(target) Release/obj.target/bufferutil/src/bufferutil.o
  SOLINK_MODULE(target) Release/obj.target/bufferutil.node
  COPY Release/bufferutil.node
make: Leaving directory `/home/pengchengxiang/AwesomeProject/node_modules/react-native/node_modules/ws/node_modules/bufferutil/build'

> utf-8-validate@1.2.1 install /home/pengchengxiang/AwesomeProject/node_modules/react-native/node_modules/ws/node_modules/utf-8-validate
> node-gyp rebuild

make: Entering directory `/home/pengchengxiang/AwesomeProject/node_modules/react-native/node_modules/ws/node_modules/utf-8-validate/build'
  CXX(target) Release/obj.target/validation/src/validation.o
  SOLINK_MODULE(target) Release/obj.target/validation.node
  COPY Release/validation.node
make: Leaving directory `/home/pengchengxiang/AwesomeProject/node_modules/react-native/node_modules/ws/node_modules/utf-8-validate/build'

> spawn-sync@1.0.15 postinstall /home/pengchengxiang/AwesomeProject/node_modules/react-native/node_modules/yeoman-generator/node_modules/cross-spawn/node_modules/spawn-sync
> node postinstall

npm WARN optional dep failed,continuing fsevents@1.0.12
react-native@0.25.1 node_modules/react-native
├── regenerator-runtime@0.9.5
├── react-clone-referenced-element@1.0.1
├── absolute-path@0.0.0
├── graceful-fs@4.1.3
├── progress@1.1.8
├── stacktrace-parser@0.1.3
├── base64-js@0.0.8
├── event-target-shim@1.1.1
├── wordwrap@1.0.0
├── react-timer-mixin@0.13.3
├── immutable@3.7.6
├── semver@5.1.0
├── image-size@0.3.5
├── opn@3.0.3 (object-assign@4.1.0)
├── bser@1.0.2 (node-int64@0.4.0)
├── debug@2.2.0 (ms@0.7.1)
├── json-stable-stringify@1.0.1 (jsonify@0.0.0)
├── temp@0.8.3 (os-tmpdir@1.0.1,rimraf@2.2.8)
├── chalk@1.1.3 (escape-string-regexp@1.0.5,ansi-styles@2.2.1,supports-color@2.0.0,has-ansi@2.0.0,strip-ansi@3.0.1)
├── source-map@0.4.4 (amdefine@1.0.0)
├── mkdirp@0.5.1 (minimist@0.0.8)
├── rebound@0.0.13
├── optimist@0.6.1 (wordwrap@0.0.3,minimist@0.0.10)
├── worker-farm@1.3.1 (xtend@4.0.1,errno@0.1.4)
├── promise@7.1.1 (asap@2.0.3)
├── node-haste@2.9.6 (throat@2.0.2,denodeify@1.2.1)
├── sane@1.3.4 (fb-watchman@1.9.0,watch@0.10.0,minimist@1.2.0,exec-sh@0.2.0,minimatch@0.2.14,walker@1.0.7)
├── yargs@3.32.0 (decamelize@1.2.0,y18n@3.2.1,camelcase@2.1.1,window-size@0.1.4,cliui@3.2.0,string-width@1.0.1,os-locale@1.4.0)
├── node-fetch@1.5.1 (is-stream@1.1.0,encoding@0.1.12)
├── art@0.10.1
├── ws@0.8.1 (options@0.0.6,ultron@1.0.2,bufferutil@1.2.1,utf-8-validate@1.2.1)
├── json5@0.4.0
├── uglify-js@2.6.2 (async@0.2.10,uglify-to-browserify@1.0.2,source-map@0.5.6,yargs@3.10.0)
├── connect@2.30.2 (bytes@2.1.0,cookie-signature@1.0.6,utils-merge@1.0.0,content-type@1.0.1,on-headers@1.0.1,pause@0.1.0,fresh@0.3.0,parseurl@1.3.1,response-time@2.3.1,vhost@3.0.2,basic-auth-connect@1.0.0,cookie@0.1.3,cookie-parser@1.3.5,depd@1.0.1,qs@4.0.0,method-override@2.3.5,connect-timeout@1.6.2,serve-favicon@2.3.0,http-errors@1.3.1,morgan@1.6.1,finalhandler@0.4.0,express-session@1.11.3,type-is@1.6.12,csurf@1.8.3,serve-static@1.10.2,multiparty@3.3.2,errorhandler@1.4.3,compression@1.5.2,body-parser@1.13.3,serve-index@1.7.3)
├── jstransform@11.0.3 (object-assign@2.1.1,base62@1.1.1,esprima-fb@15001.1.0-dev-harmony-fb,commoner@0.10.4)
├── module-deps@3.9.1 (browser-resolve@1.11.1,through2@1.1.1,inherits@2.0.1,defined@1.0.0,duplexer2@0.0.2,xtend@4.0.1,concat-stream@1.4.10,parents@1.0.1,readable-stream@1.1.14,subarg@1.0.0,stream-combiner2@1.0.2,JSONStream@1.1.1,resolve@1.1.7,detective@4.3.1)
├── babel-plugin-external-helpers@6.8.0 (babel-runtime@6.6.1)
├── babel-register@6.8.0 (path-exists@1.0.0,home-or-tmp@1.0.0,source-map-support@0.2.10,babel-runtime@6.6.1)
├── babel-polyfill@6.8.0 (babel-regenerator-runtime@6.5.0,babel-runtime@6.6.1)
├── babel-types@6.8.1 (to-fast-properties@1.0.2,esutils@2.0.2,babel-traverse@6.8.0,babel-runtime@6.6.1)
├── babel-core@6.8.0 (slash@1.0.0,babel-messages@6.8.0,babel-template@6.8.0,shebang-regex@1.0.0,path-exists@1.0.0,path-is-absolute@1.0.0,babel-helpers@6.8.0,private@0.1.6,convert-source-map@1.2.0,babel-code-frame@6.8.0,minimatch@2.0.10,babel-generator@6.8.0,babel-runtime@6.6.1)
├── babylon@6.8.0 (babel-runtime@6.6.1)
├── joi@6.10.1 (topo@1.1.0,isemail@1.2.0,hoek@2.16.3,moment@2.13.0)
├── lodash@3.10.1
├── fbjs@0.7.2 (ua-parser-js@0.7.10,loose-envify@1.1.0,isomorphic-fetch@2.2.1,core-js@1.2.6)
├── fbjs-scripts@0.4.0 (object-assign@4.1.0,through2@2.0.1,gulp-util@3.0.7,core-js@1.2.6,babel@5.8.38)
├── core-js@2.3.0
├── yeoman-environment@1.6.1 (escape-string-regexp@1.0.5,log-symbols@1.0.2,text-table@0.2.0,untildify@2.1.0,diff@2.2.2,mem-fs@1.1.2,globby@4.0.0,grouped-queue@0.3.2,inquirer@1.0.2,lodash@4.11.2)
├── react-transform-hmr@1.0.4 (global@4.3.0,react-proxy@1.1.8)
├── yeoman-generator@0.20.3 (detect-conflict@1.0.0,read-chunk@1.0.1,yeoman-welcome@1.0.1,async@1.5.2,mime@1.3.4,class-extend@0.1.2,dargs@4.1.0,user-home@2.0.0,xdg-basedir@2.0.0,istextorbinary@1.0.2,nopt@3.0.6,run-async@0.1.0,cli-table@0.3.1,shelljs@0.5.3,yeoman-assert@2.2.1,glob@5.0.15,findup-sync@0.2.1,rimraf@2.5.2,mem-fs-editor@2.2.0,cross-spawn@2.2.3,underscore.string@3.3.4,sinon@1.17.4,pretty-bytes@2.0.1,github-username@2.1.0,dateformat@1.0.12,download@4.4.3,html-wiring@1.2.0,inquirer@0.8.5,gruntfile-editor@1.2.0)
└── babel-preset-react-native@1.7.0 (babel-plugin-syntax-flow@6.8.0,babel-plugin-syntax-async-functions@6.8.0,babel-plugin-transform-es2015-template-literals@6.8.0,babel-plugin-transform-class-properties@6.8.0,babel-plugin-syntax-class-properties@6.8.0,babel-plugin-transform-es2015-arrow-functions@6.8.0,babel-plugin-transform-es2015-destructuring@6.8.0,babel-plugin-transform-es2015-shorthand-properties@6.8.0,babel-plugin-transform-es2015-spread@6.8.0,babel-plugin-transform-flow-strip-types@6.8.0,babel-plugin-transform-es2015-for-of@6.8.0,babel-plugin-transform-react-display-name@6.8.0,babel-plugin-syntax-jsx@6.8.0,babel-plugin-check-es2015-constants@6.8.0,babel-plugin-transform-es2015-function-name@6.8.0,babel-plugin-transform-es2015-computed-properties@6.8.0,babel-plugin-transform-react-jsx@6.8.0,babel-plugin-transform-object-rest-spread@6.8.0,babel-plugin-transform-es2015-modules-commonjs@6.8.0,babel-plugin-transform-es2015-block-scoping@6.8.0,babel-plugin-transform-object-assign@6.8.0,babel-plugin-transform-es2015-parameters@6.8.0,babel-plugin-transform-es2015-classes@6.8.0,babel-plugin-syntax-trailing-function-commas@6.8.0,babel-plugin-transform-regenerator@6.8.0,babel-plugin-react-transform@2.0.2)
提示1:如果在安装的过程中,报错如下
pengcx@pengcx-Ubuntu:~/ReactNativeWorkspace/AwesomeProject$ npm install --save react-native@0.25.1
npm ERR! tar.unpack error reading /home/pengcx/.npm/babel-runtime/6.6.1/package.tgz
npm ERR! tar.unpack error reading /home/pengcx/.npm/object-assign/4.1.0/package.tgz
npm WARN optional dep failed,continuing bufferutil@1.2.x
npm ERR! tar.unpack error reading /home/pengcx/.npm/path-exists/1.0.0/package.tgz
npm ERR! Linux 3.13.0-85-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "install" "--save" "react-native@0.25.1"
npm ERR! node v4.4.3
npm ERR! npm v2.15.1
npm ERR! 0-byte tarball
npm ERR! Please run `npm cache clean`
npm ERR!
npm ERR! If you need help,you may report this error at:
npm ERR! <https://github.com/npm/npm/issues>
npm ERR! Please include the following file with any support request:
npm ERR! /home/pengcx/ReactNativeWorkspace/AwesomeProject/npm-debug.log
处理:npm cache clean
四、更新你项目的template文件
新的npm包会包含更新在运行react-nativeinit命令生成的一些动态文件,例如init创建项目的时候会生成iOS和Android的子项目,我们可以通过以下的命令进行获取最新的代码:
pengchengxiang@ubuntu:~/AwesomeProject$ react-native upgrade
Upgrading project to react-native v0.25.1
Be sure to read the release notes and breaking changes:
https://github.com/facebook/react-native/releases/tag/v0.25.0
 conflict .gitignore
? Overwrite .gitignore? overwrite
    force .gitignore
identical .watchmanconfig
   create .buckconfig
identical ios/AwesomeProject/AppDelegate.h
identical ios/AwesomeProject/AppDelegate.m
identical ios/AwesomeProject/Base.lproj/LaunchScreen.xib
identical ios/AwesomeProject/Images.xcassets/AppIcon.appiconset/Contents.json
identical ios/AwesomeProject/Info.plist
identical ios/AwesomeProject/main.m
 conflict ios/AwesomeProjectTests/AwesomeProjectTests.m
? Overwrite ios/AwesomeProjectTests/AwesomeProjectTests.m? overwrite
    force ios/AwesomeProjectTests/AwesomeProjectTests.m
identical ios/AwesomeProjectTests/Info.plist
identical ios/AwesomeProject.xcodeproj/project.pbxproj
identical ios/AwesomeProject.xcodeproj/xcshareddata/xcschemes/AwesomeProject.xcscheme
 conflict android/build.gradle
? Overwrite android/build.gradle? overwrite
    force android/build.gradle
identical android/gradle.properties
identical android/settings.gradle
   create android/app/BUCK
 conflict android/app/build.gradle
? Overwrite android/app/build.gradle? overwrite
    force android/app/build.gradle
 conflict android/app/proguard-rules.pro
? Overwrite android/app/proguard-rules.pro? overwrite
    force android/app/proguard-rules.pro
identical android/app/src/main/java/com/awesomeproject/MainActivity.java
To run your app on iOS:
   cd /home/pengchengxiang/AwesomeProject
   react-native run-ios
   - or -
   Open /home/pengchengxiang/AwesomeProject/ios/AwesomeProject.xcodeproj in Xcode
   Hit the Run button
To run your app on Android:
   Have an Android emulator running (quickest way to get started),or a device connected
   cd /home/pengchengxiang/AwesomeProject
   react-native run-android
它会检查你的文件,对比最新版本,然后进行如下几个操作:
如果是新添加的文件,会进行直接创建
如果更新的文件和当前项目的文件是一样的,就会直接忽略跳过
如果更新的文件和当前项目的文件不同,有冲突的情况,会让我们进行选择是保留原来的文件还是用更新的文件覆盖,这个要看实际情况了。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如果组件之中有复用的代码,需要重新创建一个父类,父类中存储公共代码,返回子类,同时把公用属性...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例如我们的 setState 函数式同步执行的,我们的事件处理直接绑定在了 dom 元素上,这些都跟 re...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom 转为真实 dom 进行挂载。其实函数是组件和类组件也是在这个基础上包裹了一层,一个是调...
react 本身提供了克隆组件的方法,但是平时开发中可能很少使用,可能是不了解。我公司的项目就没有使用,但是在很多三方库中都有使用。本小节我们来学习下如果使用该...
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接触 react 就一直使用 mobx 库,上手简单不复杂。
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc 端可以使用分页进行渲染数限制,在移动端可以使用下拉加载更多。但是对于大量的列表渲染,特别像有实时数据...
本小节开始前,我们先答复下一个同学的问题。上一小节发布后,有小伙伴后台来信问到:‘小编你只讲了类组件中怎么使用 ref,那在函数式组件中怎么使用呢?’。确实我们...
上一小节我们了解了固定高度的滚动列表实现,因为是固定高度所以容器总高度和每个元素的 size、offset 很容易得到,这种场景也适合我们常见的大部分场景,例如...
上一小节我们处理了 setState 的批量更新机制,但是我们有两个遗漏点,一个是源码中的 setState 可以传入函数,同时 setState 可以传入第二...
我们知道 react 进行页面渲染或者刷新的时候,会从根节点到子节点全部执行一遍,即使子组件中没有状态的改变,也会执行。这就造成了性能不必要的浪费。之前我们了解...
在平时工作中的某些场景下,你可能想在整个组件树中传递数据,但却不想手动地通过 props 属性在每一层传递属性,contextAPI 应用而生。
楼主最近入职新单位了,恰好新单位使用的技术栈是 react,因为之前一直进行的是 vue2/vue3 和小程序开发,对于这些技术栈实现机制也有一些了解,最少面试...
我们上一节了了解了函数式组件和类组件的处理方式,本质就是处理基于 babel 处理后的 type 类型,最后还是要处理虚拟 dom。本小节我们学习下组件的更新机...
前面几节我们学习了解了 react 的渲染机制和生命周期,本节我们正式进入基本面试必考的核心地带 -- diff 算法,了解如何优化和复用 dom 操作的,还有...
我们在之前已经学习过 react 生命周期,但是在 16 版本中 will 类的生命周期进行了废除,虽然依然可以用,但是需要加上 UNSAFE 开头,表示是不安...
上一小节我们学习了 react 中类组件的优化方式,对于 hooks 为主流的函数式编程,react 也提供了优化方式 memo 方法,本小节我们来了解下它的用...
开源不易,感谢你的支持,❤ star me if you like concent ^_^
hel-micro,模块联邦sdk化,免构建、热更新、工具链无关的微模块方案 ,欢迎关注与了解
本文主题围绕concent的setup和react的五把钩子来展开,既然提到了setup就离不开composition api这个关键词,准确的说setup是由...
ReactsetState的执行是异步还是同步官方文档是这么说的setState()doesnotalwaysimmediatelyupdatethecomponent.Itmaybatchordefertheupdateuntillater.Thismakesreadingthis.staterightaftercallingsetState()apotentialpitfall.Instead,usecom