RN 升级 0.57.0

最近把RN从0.51.0升级到0.57.0，升级之后发现项目跑不起来了。google了半天终于解决了问题，这里做个记录。

升级

• 升级 react native 到0.57.0 ，升级react 到16.5

• 修改 babel-preset 依赖从 "babel-preset-react-native": "^5" 改为 "metro-react-native-babel-preset": "^0.45.0"，并更新.babelrc文件

{
    "presets": ["module:metro-react-native-babel-preset"]
}

• 增加 @babel/plugin-external-helpers

• 增加 [email protected]

升级完上述依赖之后可能还会碰到 babel runtime 报错 此时需要增加"@babel/runtime": "^7.1.2"。

Android 和 iOS 还需要升级 native 的一些工具，按文档上的升级就行了，没什么大坑，这里不详细讲，参考官方文档。

填坑

react-native-scrollable-tab-view

升级完之后运行项目发现还是报错，原因是项目中用到了 react-native-scrollable-tab-view 这个三方库，代码中多了个逗号，去掉就行了。

const {shouldUpdated, ...props, } = Props;

但是多人合作的项目中这么做不合适。目前这个库还没有发布新版本修复。一种做法是 fork 这个项目自己修改后再依赖修改后的库。查看这个库的 github，果然发现有人提 issue。实际上这个 bug 已经在 master 分支上已经修复，我们可以切换到 master 分支上

"react-native-scrollable-tab-view": "git+https://github.com/happypancake/react-native-scrollable-tab-view.git"

这里还有吐槽一下这个库，提供的 ScrollableTabBar 还有好几个 bug 没修，不知道下个 release 会不会一起修掉。

cookie 失效

修完上面的bug之后项目终于可以正常运行，但是这时候出现了更大的坑，cookie失效了。回滚新版本增加的 feature 代码，问题任然存在， 回退 rn 版本到 0.51.0 问题消失，升级到 0.57.0 问题出现，所以可以断定是高版本 rn 的问题。继续查阅 github 上的 issue 发现从 0.56.0 版本开始就有这个问题。解决方案是 在fetch 的时候加上 credentials: 'include'

fetch(route, {method: 'GET', headers, credentials: 'include'})

加上之后解决 cookie 失效问题，踩坑之旅暂时告一段落。

总结

RN 开发相对于原生开发方便了很多，但是目前还是有很多坑，不过好在 RN 社区还算活跃，大部分问题都能解决。比如这次升级，碰到了很多意想不到的坑，好在 google 了一圈也都能够解决。

参考文献

• How To Upgrade Project to React-Native 0.57 (RN 0.57)

• React Native changelog

• Cookie-Based Authentication Is Not Possible

• https://github.com/happypancake/react-native-scrollable-tab-view/issues/937