ReactNativeは現在も2週間後ごとにバージョンアップしており新機能の追加やバグフィックスなども盛んに行われています。
ReactNativeで開発していると、リリースされた最新バージョンだと直面していたバグが直っているということもあり、そのときに必要になるのがReactNative自体のバージョンのアップグレードです。
公式にも手順は記されているのですが行った際に詰まったことも多かったため、手順として記載します。
前提
- 対象は
react-native init XXで作成したプロジェクトになります。 -
create-react-native-appを使用して作成したプロジェクトは別の方法になるようです。(あんまり調べてません)
事前準備
ReactNativeの公式を参考にreact-native-git-upgradeをインストールします。
install実施後にバージョン確認ができたら準備完了です。
npm install -g react-native-git-upgrade
react-native-git-upgrade -v
Upgrading to new React Native versions
アップグレード実施
ライブラリのunlink
react-native-git-upgradeを実施する前に各ライブラリのlinkを解除しておきます。
理由としてはこの後にあるコンフリクトの解消をしやすくするためです。
プロジェクト配下のpackage.jsonのdependenciesからlinkしているライブラリを見つけて解除します。(どれがlinkしているか分からなかったら、dependenciesの配下を全てlink解除しても空振りするだけなので問題ありません。)
link解除は以下のコマンドで行います。
react-native unlink パッケージ名
バージョンアップ
react-native-git-upgradeを使用してバージョンを上げていきます。
react-native-git-upgrade #最新版にする場合はとくにオプションをつけない
react-native-git-upgrade 0.48.4 #特定のバージョンにする場合はバージョンを続けて書く
コンフリクト解消(iOS)
react-native-git-upgradeを実施すると、ios配下にあるproject.pbxprojがコンフリクトを起こします。
pbxprojはiosのプロジェクト構成を管理しているファイルであり、基本的にはxcodeに管理を任せておけばいいものですが、たまにコンフリクトして大変なことになります。
ただ、react-native-git-upgradeでのpbxprojのコンフリクトの解消はそんなに大変ではありません。
基本的に以下の点に気をつければ、コンフリクトを解消してxcodeでプロジェクトを開けるようになります。
-
<<<<<<< oursを削除 -
=======を削除 -
>>>>>>> theirsを削除 - pbxprojの,や};などの構造がおかしくなっている部分がないか確認(大体、git差分が出ている部分を見ると何箇所がある)
ライブラリをlink
xcodeでiosのプロジェクトが開けたら、unlinkコマンドを全てlinkにしてライブラリをlinkし直します。unlinkを全てlinkに置換してしまえばいいと思います。
react-native link パッケージ名
コンフリクト解消(Android)
linkをするとAndroid側で差分が発生しており正常に動かなくなります。
私の環境で発生したのは以下でしたが簡単に解消することができました。
- Androidのsrc配下のMainApplication.javaのgetPackagesでlinkしているパッケージがダブっているので1つにする
動作確認
ios、Androidで動作確認ができたらGitにコミットしてアップグレード完了です。
もっと簡単にやる方法も探したいところですが、一旦これで対応できているのでここまでとします。