JS checklist

升级方法

转换工具不是万能的，提交代码前请谨慎 diff。转化工具做不到的，请查看下面的升级点中的红字部分。

  1. 安装最新版 qrn-cli
  2. 在项目目录下执行 qrn shift，会自动转换
    • qrn shift -d：预转换（不修改源文件，只输出错误和提示）
    • qrn shift -t [路径]：转换指定路径的文件（默认是当前文件夹）

输出结果分析：

  • Results：
    • errors：文件解析错误（比如：语法错误，无法解析的 flow 语法等）
    • unmodified：未修改的文件
    • skipped：跳过的文件
    • ok：修改的文件
  • 所有红色提示的错误或提示都是需要 check 的点，包括：
    • 引用了未知的 React/RN/QRN 组件，会自动删除（需要手动确认并处理调用的地方）
    • 已经删除的组件（需要手动删除调用的地方）
    • 引起错误的 React 赋值，比如 var {View} = React（需要手动处理）
    • 引起错误的 React 属性调用，比如 React.View（需要手动处理）
    • 引起错误的 react/lib 引用，比如 require('react/lib/findNodeHandler')（需要确认是否可用）
    • View 现已不支持 onPress 事件（需要手动替换成 Touchable 系列组件）
    • EventEmitter 的 removeSpecificListener 已经转换成 removeSubscription（需要确认）

如果项目启动后仍旧报如图所示错误，请检查你所引用的外部 npm 模块是否有依赖问题。

详细的升级点请参照下面的说明。

升级点

1. 拆分 react/react-native/qunar-react-native 的依赖

qrn-cli 会自动转换，并输出错误和提示，需要手动处理错误提示。

qrn-cli 会忽略 node_modules 目录，需要用户自己确认依赖的包是否有问题。

QRN2.0 不再支持从 react-native 中引用 react 的 API（官方从 0.25.1 版本已不再支持该方式），并且也不再支持从 qunar-react-native 中引用 react 和 react-native 的内容。

在 qrn-cli 转换的时候，只会处理 import 和 require 语句，所以下面这种代码只会提示修改不会自动修改。

var React = require('react-native');
var {Component, View} = React;

** 常见可能 import 出错的组件的正确引入方式如下：**

import React, {
  Component,
  PropTypes,
  Children
  createClass,
  createElement,
  createFactory,
  createMixin,
  isValidElement,
} from 'react';

import {
  findNodeHandle
} from 'react-native';

// Switch 强烈建议使用 qunar-react-native 中的
// 因为我们提供的 Switch 在 iOS 和 Android 2个平台上是UI
import { 
  Switch 
} from 'qunar-react-native';

2. 不再支持直接引用 rn/qrn 内部的模块

不再支持通过 `require('xxx')` 或 `import 'xxx'` 的方式引用 rn/qrn 内部的模块。

已经集成的组件和 API 请通过 rn/qrn 来引用。 未集成的内部模块，希望尽量不要使用，官方升级很可能会变更。如果要引用的话，请使用路径来引用。

3. 更名和删除的组件

qrn-cli 会自动转换，并输出提示，需要手动处理已经删除的组件的使用。

删除的组件：

  • QCameraView
  • Hytive
  • QStorageManager

更名的组件：

  • ABTest 变更为：QABTest
  • CVParam 变更为：QCVParam
  • LoginManager 变更为：QLoginManager
  • UELog 变更为：QUELog
  • QStatusBar 变更为：StatusBar

4. 需要在入口处添加 iconfont 的引用和调用

qrn-cli 会自动添加

import { FontLoader } from 'qunar-react-native';
FontLoader.loadFontSet(require('QFontSet'));

5. 所有 react/lib/xxx 方式的模块都需要 check

qrn-cli 会输出提示，需要手动判断是否修改。

React 从 15.4.2 版本开始，将其中 React-Native 相关的文件挪到了 React-Native 中。所以，代码中如果用到了 react/lib/xxx 这种方式引用的模块，都需要注意引用的模块是不是已经被挪出了 React。

6. EXT 不再支持 View 的 onPress 事件

qrn-cli 会输出提示，需要手动修改。

QRN-EXT 不再支持 onPress 事件。原因是，所有的可点击区域应该都是带反馈效果的，而使用 View 是没有任何效果的。所以我们希望开发者能自己选择使用 Touchable 系列组件。

7. EventEmitter 的 removeSpecificListener 接口改成 removeSubscription

qrn-cli 会自动进行接口转换。

EventEmitter.removeSpecificListener -> EventEmitter.removeSubscription

8. EXT 中去掉了全局变量 React

如果报找不到 React 的错误，请检查是否引用了正确的 React。

QRN-EXT 中去掉了 指向 ReactNative 的全局变量 React，所有用到 React/RN/QRN 的地方，都需要自己引用。

9. babel 插件 qreact 改成了 qrn

如果报找不到 qreact 的错误，请将项目中的 .babelrc 文件中的 qreact 改成 qrn。

10. 升级 QRN 外部UI组件依赖为 ^2.0.0

QRN 外部UI组件指的是 @qnpm/react-native-ui-xxx 一类的模块, 如果引用了这类模块，需要全部升级依赖为 ^2.0.0

可以参照下面修改package.json：

{
    "dependencies": {
      "@qnpm/react-native-ui-carousel": "^2.0.0",
      "@qnpm/react-native-ui-dialog": "^2.0.0",
    ...
  }
}

11. flex 布局相关的错误

`flex` 布局变得比之前更加严格。

出现下图所示的错误，是因为在 `style` 中 同时设置了 `flex : 1` 和 `width` 、 `height` 值
请将 `flex: 1` 替换成 `flexGrow: 1`

12. QRN 中 ListView 不支持横向列表

在 QRN v2.0 中，我们重新实现了一个更高效的 ListView ，这个 ListView 暂不支持横向列表，如果需要横向列表可以使用 react-native 的 ListView

有任何问题请联系殷文昭（wenzhao.yin）。

v2.0.0
iOS