RN61开发者升级指南

RN0.61.0开发者升级指南

概述

  react-native的版本目前更新较快，目前最新版本已经到了0.61.5版本，为了利用rn升级带来的性能及稳定性方面的优化，米家将react-native版本升至0.61.0，之后新上线或是更新的插件将只接收基于0.61.0版本开发的插件，请各位开发者基于SDK10033及以上，iOS版本4.25.2，Android版本 5.6.47及更新版本进行开发，基于RN0.54.0版本开发的插件请务必保证在RN0.61.0环境调试成功后再进行打包上传。

特别注意

• 本次升级之后提交的插件将只会在iOS版本4.25.2，Android版本 5.6.47及更新版本中才会拉取到相关插件，基于RN0.61.0的插件在只支持RN0.54.0的版本将产生运行问题，请各位开发者一定注意将project.json中的API最低版本设为10033.
• 开发者需将GitHub开发分支切至10033及以上分支，切换分支后，请开发者一定注意重新安装依赖，推荐使用npm ci进行安装，如果使用npm ci安装失败，再采用npm install进行安装.

升级后语法调试相关

• Unable to resolve module 'XXX'
  如果使用 const XXX = require('XXX') 引入 react-native 模块，如遇到 Unable to resolve module 'XXX' 的问题，请改为 import { XXX } from 'react-native' ，部分模块名称可能会有变更，可以在node_modules/react-native/Libraries/react-native/react-native-implementation.js 文件查看 react-native 导出的模块名称。

react-native相关组件变化

• Webview,native通信，在0.61.0中消息发送接收写法变了，iOS/Android native已针对上述变化都做了兼容，使得老版本写法也可以正常使用，但是仍推荐开发者采用新的写法
• Android使用require加载本地html时，在调试模式不能预览，可以上传到cdn或者使用html标签
• iOS如果有设置圆角的需求需要显示设置overflow:hidden，否则圆角的显示有问题
• Slider显示设置白色会使slider的阴影消失，如果有滑块设为白色的需求颜色请使用默认颜色，iOS处已特殊判断白色的颜色设置，请开发者尽量避免这样写。
• iOS端webview的native实现由UIWebview换成了WKWebview，如通过链接跳appstore等操作需注意测试（native已做处理），wkwebview相比uiwebview，比如cookie等已知问题，请开发者注意测试
• Navigator的didFous和onLayout的执行顺序的变化（之前是didFocus,onLayout现在是onLayout，didFocus，测试的时候发现，第一次进入插件的时候，在didMount里注册的didFocus函数并没有执行）
• iOS中rn0.61.0中RCTImageView不在继承UIImageView，如使用相关控件，请开发者注意相关页面是否展示有异常
• ListView在RN0.61.0版本中移除，请开发者采用FlatList，之前使用的ListView在0.61.0的开发做过兼容，但不推荐继续使用，将在未来移除，请开发者注意将相关页面替换成Flatlist实现

• 动画使用注意：RN0.61.0上如果需要实现一次性动画或者不需要和用户交互控制的一些动画可以使用LayoutAnimation，不会出现卡顿，很流畅。但是如果需要和用户交互，需要精细的交互控制的动画官方推荐（官方链接）使用Animated实现，使用LayoutAnimation实现需要用户频繁控制的动画可能会出现卡顿。

开发环境注意点

• Watchman error解决方案
  https://github.com/facebook/watchman/issues/751

其他注意点

• Promise.prototype.finally
  RN0.61.0版本的 finally 回调中不含有任何参数，请开发者注意检查代码的规范性。
  https://github.com/joshwcomeau/understanding-react/blob/master/node_modules/promise/setimmediate/finally.js

• 安卓状态栏高度,新版本视图的起始位置（y）较老版本有所变化，请开发者注意页面的展示是否不正常

• 安卓中如果在html中加载图片，需要将图片上传到cdn，从云端加载，从本地加载会失败

避免使用的模块

  以下模块在react-native0.61.0版本中被移除，我们为了兼容旧的插件做了处理，请开发者避免使用以下模块，如有使用，请尽快使用替代模块更新代码。

• NetInfo
• ViewPagerAndroid
• BackAndroid
• SwipeableFlatList
• AlertIOS
• node_modules/react-native/Libraries/StyleSheet/StyleSheetPropType.js
  node_modules/react-native/Libraries/Components/View/ViewStylePropTypes.js
  node_modules/react-native/Libraries/Lists/ListView/ListView.js
  node_modules/react-native/Libraries/Lists/ListView/ListViewDataSource.js
  node_modules/react-native/Libraries/Image/ImageSourcePropType.js
  node_modules/react-native/Libraries/Image/ImageStylePropTypes.js
  以上js文件在RN0.61.0版本被移到到了node_modules/react-native/Libraries/DeprecatedPropTypes内，同时名称前面增加了Deprecated，如开发者使用了相关PropTypes请注意名称及路径变化，避免继续使用老的写法