React Native项目升级笔记

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

iOS原生端的错误

RN基础组件编译异常

RCTBridgeModule.h
在这里插入图片描述

解决措施：
RNFileOpener.h

//#import "RCTBridgeModule.h"
//#import "RCTBridge.h"
改为
#import <React/RCTBridgeModule.h>
#import <React/RCTBridge.h>

RCTHttpCache.m

//#import "RCTImageLoader.h"
//#import "RCTBridge.h"
修改为
#import <React/RCTBridge.h>
#import <React/RCTImageLoader.h>

RCTHttpCache.h

//#import "RCTBridgeModule.h"
修改为
#import <React/RCTBridgeModule.h>

第三方库问题

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原生端获取该点绘制异常）
<Path d="M-67-1.267"/>

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端)库的链接等
在升级过程中，注意这两方面的问题就能掌控项目的升级。