资讯专栏INFORMATION COLUMN

React Native 升级到版本到0.25.1

jeffrey_up / 1582人阅读

摘要:的更新策略是两个星期迭代一个新版本使用的没有多长时间就需要升到最新版本了,这里介绍下如何升级到版本以及其以上。使用首先要添加的依赖,如果把的版本直接升高到当前版本,比如。

React Native的更新策略是两个星期迭代一个新版本,使用的React Natvie没有多长时间就需要升到最新版本了,这里介绍下如何升级到版本0.25.1以及其以上。

React Native 25,一个显著的变化是import React的时候不再从react-native中导入,而是从react中导入。所以首先需要添加react的依赖。

使用React

首先要添加React的依赖,如果把react-natie的版本直接升高到当前版本,比如:"react-native": "0.31.0"
使用npm install 安装依赖包的时候,会提示错误:

npm WARN react-native@0.31.0 requires a peer of react@~15.2.1 but none was installed.

就需要我们添加对于React的依赖,可以使用命令添加React的依赖:

npm install -save react@~15.2.1

也可以在package.json中添加依赖:

{
  "name": "rn310",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "react": "^15.2.1",
    "react-native": "0.31.0"
  }
}

在运行npm install就可以自动下载依赖了。

import React from "react"

React Native 25之后,除了React不再从react-native中引入之外,还包括Component,PropTypes,Children等...
这里要注意,旧版本的React是从react-native中import的。
如果升级完依赖之后,直接运行项目之后会得到一个报错信息:

Seems you"re trying to access "ReactNative.Component" from the "react-native" pakeage.
Perhaps you meant to access "React.Component" from the "React" package instead?
For example, instead of :

import React, { Component, View } from "react-native";
you should now:

import React, { Component } from "react";
import { View } from "react-native";
.....

提示的内容就是告诉我们需要把Component,React等从包react中引入,不能再从react-native中引入。
如果要更新引入,基本上要修改所有的文件,还好我们从更新说明中可以看到有工具来做这个事情。
codemod-RN24-to-RN25是一个升级项目文件支持React Native 25的工具,更改文件的import,让需要引入react的文件能够正确的import
使用方法:

安装jscodeshift

npm install -g jscodeshift

clone项目,

git clone git@github.com:sibeliusseraphini/codemod-RN24-to-RN25.git

copy transform.js

cd codemod-RN24-to-RN25
cp transform.js `YOUR_PROJECT_PATH`

运行命令转换文件

cd `YOUR_PROJECT_PATH`
jscodeshift transform.js

等待运行完成之后可以看到React以及Component等都能被正确的引用到react包下。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/80063.html

相关文章

  • React Native 在 Airbnb(译文)

    摘要:声明有助于保持我们的同步与底层状态的声明性质。值得注意的是,这些挑战并非特定于。这导致或上出现不一致或意外错误。崩溃监控我们使用在和上进行崩溃报告。桥接有一个桥接,用于在本机和之间进行通信。 showImg(https://segmentfault.com/img/bVbd0FA?w=740&h=433);在Android,iOS,Web和跨平台框架的横向对比中,React Nativ...

    nihao 评论0 收藏0
  • React Native 在 Airbnb(译文)

    摘要:声明有助于保持我们的同步与底层状态的声明性质。值得注意的是,这些挑战并非特定于。这导致或上出现不一致或意外错误。崩溃监控我们使用在和上进行崩溃报告。桥接有一个桥接,用于在本机和之间进行通信。 showImg(https://segmentfault.com/img/bVbd0FA?w=740&h=433);在Android,iOS,Web和跨平台框架的横向对比中,React Nativ...

    chenatu 评论0 收藏0

发表评论

0条评论

jeffrey_up

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<