一、升级步骤
因为是公司项目自定义的文件比较多，不适合用各类升级工具与指令，主要参考upgrade helper提供的改动点。
地址:https://react-native-community.github.io/upgrade-helper/(版本对比的网址)
二、升级的好处
1、AutoLink(自动链接)
rn的6.0+引入了autolink,对于有native代码的第三方库，npm install 或者 yarn add之后，不需要执行react-native link XXX 了。
iOS使用了cocoapods 来管理依赖，我们进入项目的iOS目录，执行pod install即可；安卓之前link完，会在setting.gradle、build.gradle、MainApplication.java三个文件添加引入，现在则都不需要了。
2、支持AndroidX
报support.xx不存在
解决：升级三方库
3、修复了use_frameworks!(rn0.60不支持)
三、升级遇到的问题
1、Unable to resolve module `metro/src/lib/bundle-modules/HMRClient`
解决:把(platform :ios, '8.0'改为'9.0'),rn升级以后最低支持的ios版本为ios9
2.react native与h5页面的通信方式有所不同
window.postMessage(data, *) 改成window.ReactNativeWebView.postMessage(data)
原来的写法:window.postMessage(JSON.stringify({
type:'add',
data:{
A:valA,
B:valB
}
}))
兼容写法:
const injectedJavascript = `(function() {
window.postMessage = function(data) {
window.ReactNativeWebView.postMessage(data);
};
})()`;
3.ios横屏的时候,设置navigationOptions: () => ({
header:null,
tabBarVisible:false
}) 仍然会出现一个黑色的方块.
解决:可以自定义宽高为0.将它彻底隐藏
4.安卓升级以后总是报xxx.so找不到
解决:安卓的架包升级(armeabi=>armeabi-v7a,将armeabi中v7没有的包移到v7中)
5.安卓打包报资源重复
You can add code in node_modules/react-native/react.gradle. After doFirst
doLast {
def moveFunc = { resSuffix ->
File originalDir = file("$buildDir/generated/res/react/release/${resSuffix}");
if (originalDir.exists()) {
File destDir = file("$buildDir/../src/main/res/${resSuffix}");
ant.move(file: originalDir, tofile: destDir);
}
}
moveFunc.curry("drawable-ldpi").call()
moveFunc.curry("drawable-mdpi").call()
moveFunc.curry("drawable-hdpi").call()
moveFunc.curry("drawable-xhdpi").call()
moveFunc.curry("drawable-xxhdpi").call()
moveFunc.curry("drawable-xxxhdpi").call()
moveFunc.curry("raw").call()
}
四、引用库的变化
1、Slider、ViewPagerAndroid、WebView、Async Storage、netinfo在未来将从react-native中移除，需要从@react-native-community引入.
可参考：
https://github.com/react-native-community/react-native-slider
https://github.com/react-native-community/react-native-viewpager
https://github.com/react-native-community/react-native-webview
https://github.com/react-native-community/react-native-async-storage
https://github.com/react-native-community/react-native-netinfo