React Native项目升级笔记

由于公司项目规划需要升级，项目直接从0.48直升0.57，公司项目涉及的代码量还是比较多的，此次升级大概花费2周左右的时间，现将遇到的问题记录在下面。

iOS原生端的错误

RN基础组件编译异常

RCTBridgeModule.h

解决措施：

RNFileOpener.h

//#import "RCTBridgeModule.h"

//#import "RCTBridge.h"

改为

#import

#import

RCTHttpCache.m

//#import "RCTImageLoader.h"

//#import "RCTBridge.h"

修改为

#import

#import

RCTHttpCache.h

//#import "RCTBridgeModule.h"

修改为

#import

第三方库问题

1、react-native-sqlite-storage三方库

由于项目sim.db设置路径问题

方法一：

修改该库SQLite.m文件的open方法,添加创建相关文件夹的代码，但是不建议这么做，增加了维护三方库原生代码的成本

方法二：

利用其他第三方库在JS代码中将数据库路径创建完成。

// number:157

NSString *username = options[@"user"];

// number: 197

RCTLog(@"target database location: %@", dblocation);

NSString *fileDir = [self getDBPath:username at:dblocation];

if (![[NSFileManager defaultManager] fileExistsAtPath:fileDir]){

[[NSFileManager defaultManager] createDirectoryAtPath:fileDir withIntermediateDirectories:YES attributes:NULL error:NULL];

}

dbname = [NSString stringWithFormat:@"%@/%@",username,dbfilename];

dbname = [self getDBPath:dbfilename at:dblocation];

2、react-native link问题

有些第三方库会link异常，建议采用Cocoapods来管理或者手动链接

手动链接流程：

1、在Xcode工程中的Libraries,右键 -> Add File to ‘项目名称’, 然后在node_modules中找到对应的模块

2、在Build Settings 中 添加 Link Bibraries的静态库

RN端遇到的问题

InfiniteScrollView.js: A trailing comma is not permitted after the rest element (84:20)

let {

inverted,

renderScrollComponent,

...props, // 去掉逗号

} = this.props;

strophe-1.2.8.js文件错误

问题

Invalid call at line 5666: require(['strophe'], function (o) {

n_callback(o.Strophe, o.$build, o.$msg, o.$iq, o.$pres);

}) (null))

require(['strophe'], function (o) {

n_callback(o.Strophe, o.$build, o.$msg, o.$iq, o.$pres)

})

解决办法：require修改为requirejs或者注释这段代码

找不到Text.prototype.render

tools.js

//Text.prototype.render = _.wrap(Text.prototype.render, function (func, ...args) {

// let originText = func.apply(this, args);

// return React.cloneElement(originText, {allowFontScaling: false});

//});

暂时注释，已废弃

PropTypes的相关问题

LoadingView.js

解决办法：

安装npm install prop-types

import PropTypes from 'prop-types';

Invalid attempt to spread non-iterable instance

InfiniteScrollView.js

...Platform.select({

android: {perspective: 1280},

ios: {},

}),

修改为

PlatForm.isAndroid() ? {perspective: 1280} : {}

react-native-svg错误

1、Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

解决办法升级react-native-svg到8.0.10版本,

2、升级之后iOS运行奔溃

在Svgs.js暂时注释(iOS原生端获取该点绘制异常)

Unhandled JS Exception: RangeError: Maximum call stack size exceeded

遇到这个问题的时候就需要根据具体情况分析代码了。

react-native link react-native-webview

Error: Cannot read property ‘match’ of undefined

Please file an issue here: https://github.com/facebook/react-native/issues

Cannot read property ‘match’ of undefined

TypeError: Cannot read property ‘match’ of undefined

解决办法：手动链接 react-native-webview

加载工作页失败 错误信息 too many HTTP redirects

设置属性useWebKit={false}

官方描述：If true, use WKWebView instead of UIWebView.

工作页的不是一个“单纯”的网页

RangeError: Maximum call stack size exceeded.

本项目中出现这个问题的原因之一是：使用了数组的map方法，但是返回的组件没有添加key

Android遇到的错误

org.gradle.api.tasks.TaskExecutionException: Execution failed for task ‘:app:compileDebugJavaWithJavac’.

gradlew compileDebug --stacktrace

gradlew compileDebugJavaWithJavac

来定位是react-native-splash-screen版本太旧的错误

总结此次升级过程，遇到的问题基本可以分为两个方面：

1、JS语法格式的变化，第三方库插件的修改以及适配

2、原生端(iOS端和Android端)库的链接等

在升级过程中，注意这两方面的问题就能掌控项目的升级。