RN升级0.64.2遇到的问题

作者: mjylfz | 来源:发表于2021-06-17 13:54 被阅读0次

尝试新建一个0.62的RN工程

输入命令：react-native init finereact0622 --version 0.62.2
遇到问题：应该是需要升级node版本，需要大于12，但是当前是11.10.1

image.png

使用nvm list命令查看本地node版本

image.png

nvm use v12.0.0切换

image.png

再次创建仍然提示node版本低，原来default版本还是旧版本，所以执行nvm alias default v12.0.0
发现还是不行，需要重启下电脑才可以

image.png

还是node版本问题，再切换一次
这次没问题了，打开工程先执行npm install，再执行react-native run-android，成功运行

用Android Studio打开，打算参考工程最新的脚本配置等内容，提示错误，应该是需要升级Android Studio：

image.png

升级后build工程，jdk路径有问题：

image.png

原jdk路径是：/Applications/Android Studio.app/Contents/jre/jdk/Contents/Home
改成：/Library/Java/JavaVirtualMachines/jdk1.8.0_201.jdk/Contents/Home
再去build就好了

如果仍然有问题，就加上这个：

image.png

原生遇到的问题

gradle版本不匹配，点击升级：

image.png

jvm内存爆了，增加一些配置解决此问题：

image.png

编译问题：
这个是在settings.gradle里面引入node_modules的脚本，然后可以传入一些配置运行，具体配置信息不明。
问题可能是node运行时，require('react-native/cli')找不到了，但我在node_modules中手动去找是没有问题的，可能node环境存在一点问题？github上找到了类似的问题，Android和IOS都会出现，暂时没有明确的解决方法，所以先屏蔽掉引入这段脚本。
https://github.com/react-native-community/cli/issues/1119

image.png

运行报错：

image.png

打详细堆栈发现，可能是和华为推送的AndroidManifest有冲突，所以先屏蔽掉华为推送：

image.png

https://stackoverflow.com/questions/58104159/could-not-get-unknown-property-instantrunmanifestoutputdirectory-for-task-ap
找到了类似的问题，解决方案是升级华为推送版本
com.huawei.agconnect:agcp:1.4.1.300
果然可以了

image.png

找不到style的AppTheme了，先暂时把style相关的文件移动到demoApp里，之前是在base里面
可能是demoApp依赖base有问题，先换一种依赖方式，直接依赖本地源码：

image.png

RN遇到的问题：

创建的0.62工程是给我们升级RN工程做参考的，后面遇到问题可以进行比对，现在直接执行原工程的RN升级。
先把0.62参考工程的package.json的内容拷过来，有的需要升级的，暂时没去动，不知道升级有什么影响，后续再处理。
然后npm install，发现有些我们patch过的内容，可能需要重新适配一下，我这边就先跳过了。

image.png

完成后有一些warning：

image.png

resolveAssetSource找不到，好像是老问题了，可能是别名有问题。
我们的别名设置是在babel.config.js，RN的不太清楚，暂时改成引用具体路径：

image.png

ColorPropType被移除了，暂时屏蔽掉

image.png

findNodeHandle和UIManager引用问题：

image.png

报错BlobModule转换有问题，需要原生处理一下

过了一会发现报错没了，变成了

image.png

0.62：

ColorPropType:

image.png

先把HTMLInject注释掉

image.png

react-native有些库被移除了，需要使用第三方库代替，具体包括：
ART、ListView、SwipeableListView、WebView、NetInfo、CameraRoll、ImageStore、ImageEditor、TimePickerAndroid、ViewPagerAndroid等
详见react-native/index

ListView:

image.png

引入方式：import ListView from 'deprecated-react-native-listview';

问题：

image.png

解决方案

image.png

NetInfo:
安装：npm install --save @react-native-community/netinfo
然后要把原生代码放到原生工程，才能运行起来：

image.png

这种第三方库我们通常是放到third工程里，为了方便调试和运行，我们暂时放到report工程
问题：

image.png
解决：
传参变了

image.png

ViewPager:
老办法

image.png

原生也需要引入此模块

RNFS报错：
原生需要更新一下版本，后面放到库里面

image.png

RNFS的copyFile方法参数变化：

image.png

直接参数适配：

image.png

FCTTouchableAndroid报错没找到：

image.png

确认了一下代码，感觉写的没什么问题，debug调试一下，问题居然没了。原因暂时不明。
换了FCTSafeAreaView没有这个问题，于是对比一下差异，发现原生端这个方法导致的问题，注释掉就好了，原因需要继续研究。

image.png

换一下接口就好了，暂时不清楚这两个接口有什么差异，我们两个接口都在用，并且效果是一样的：

image.png

又研究了一下不是接口的问题，是实现有问题，改成下面这样就可以了：

image.png

SVG报错：

image.png

类似的方案

AsyncStorage报错：

企业微信截图_a2424daa-5648-48ee-aa1a-3191cefb2029.png

npm install @react-native-async-storage/async-storage

升级0.64后登录，viewpager这个三方库报错闪退：
java.lang.IncompatibleClassChangeError: Found interface com.facebook.react.u
原因是third包打包时依赖的是0.62，和0.64冲突了，后面所有third都要基于0.64打一次，避免错误