Обновление приложения React-Native с версии 0.59.8 до версии 0.65.2

В этой статье объясняется, как мы обновили устаревший проект React-Native с версии 0.59.8 до версии 0.65.2. Приложение было разработано еще в 2018 году на React-Native, и на тот момент мы начали с версии React-Native 0.59.8. До сих пор мы в основном производили обновления и исправления, чтобы приложение продолжало работать и соответствовало требованиям AppStore и GooglePlayStore. Например, повышение уровня API на Android с 28 до 30 и установка исправлений для node_modules, чтобы смягчить различные проблемы с обновлением.

Основная мотивация для обновления нативной версии возникла недавно, когда нам пришлось обновить xCode до версии 13, чтобы мы могли создавать для устройств ios15. Хотя мы смогли снова решить большинство проблем с помощью исправлений, у нас все еще было несколько проблем, когда нам приходилось вручную изменять определенный код в IOS, и мы могли запускать приложение только через xCode. Обновление до xCode 13 не позволило нам запустить приложение с помощью командной строки «react-native run-ios», поскольку оно использует инструменты, и это было заменено на xctrace в RN cli версии 0.64. .

На момент написания этой статьи у нас уже была версия 0.67 для React-Native. Тем не менее, мы не хотели проходить весь путь до версии 0.67 и в основном рассматривали обновление версии 0.64–0.65.

Мы начали с просмотра всех изменений между 0.59 и 0.65 из журналов изменений https://reactnative.dev/versions. Мы также использовали https://react-native-community.github.io/upgrade-helper/, который предоставил удобный веб-интерфейс для обновления путем отображения разницы в файлах между двумя версиями.

Использование помощника по обновлению React-Native

Поскольку между версиями 0.64 и 0.65 не было существенных различий, мы решили перейти на версию 0.65. Нашей целью было сначала обновить версию React и React-Native и исправить любые неотложные проблемы, пока мы не смогли запустить приложение как на IOS, так и на Android, а затем посмотреть на обновление других зависимостей, чтобы получить работающее и полнофункциональное приложение.

Веб-инструмент Upgrade Helper четко иллюстрирует различия между старой и новой версиями и разделяет его на 3 области:

· В первой части были показаны основные обновления со ссылками на журналы изменений.

· После этого у нас был первый файл, который нужно было изменить, это был файл package.json, показывающий обновления зависимостей.

· Остальные файлы проекта показали, какие другие файлы необходимо отредактировать с этим обновлением.

Мы прошли все изменения и редактировали то, что имело отношение к нашему проекту. Нам пришлось отключить Flipper, так как у нас возникли некоторые проблемы, связанные с интеграцией, и уже был интегрирован React-Native Reactotron, который мы используем для отладки. Мы могли бы интегрировать Flipper на более позднем этапе.

Одно большое отличие, с которым мы столкнулись в начале обновления, связано с Podfile. Раньше нам приходилось перечислять все библиотеки, которые мы будем связывать, в файле Pod, но с обновлением мы просто создали Podfile, почти идентичный тому, как это было в документации Upgrade Helper. IOS автоматически связывает все зависимости при запуске установки Pod, и это доступно в React-Native 0.60 и выше.

Старый подфайл

Новый подфайл

Нам пришлось удалить проект «Project.xcodeproj» и удалить отдельные модули.

Хотя мы думали, что обновление версии React-Native и исправление любых проблем со сборкой займет меньше времени, чем обновление устаревших сторонних библиотек для устранения проблем во время выполнения, все оказалось наоборот. Нам пришлось обновить довольно много библиотек, чтобы приложение заработало. Ниже приведены некоторые сведения о библиотеках, которые нам пришлось обновить, чтобы приложение снова заработало.

Обновление React-Navigation

Одной из основных библиотек, требующих обновления после того, как мы обновили версию React-Native, была библиотека React-Navigation. Мы использовали React-Navigation версии 1, и нам нужно было как минимум обновиться до версии 3. В конечном итоге мы перешли на версию 4 после того, как мы успешно перенесли версию 3. Есть еще одна статья, в которой более подробно объясняется этот переход с версии 1 на версию 3 и, наконец, на версию 4.

Мигрировать с версии 1 на версию 3, а затем на версию 4 было проще, чем сразу переходить на версию 4, поскольку между 1 и 3 уже имеется довольно много критических изменений. Это был долгий процесс, в ходе которого мы столкнулись с множеством ошибок, но Я думаю, что многого можно было бы избежать, внимательно следя за документацией по реактивной навигации и просматривая все критические изменения. Вот несколько советов, которые могут помочь:

· Следуйте документации и убедитесь, что после обновления библиотеки реактивной навигации все одноранговые зависимости также установлены и правильно связаны.

· Замените все StackNavigator, DrawerNavigator на createStackNavigator, createDrawerNavigator соответственно. Если бы мы переходили с версии 1 на версию 2, мы бы также заменили TabNavigator на createTabNavigator, но, поскольку в react-navigation v3 полностью удален TabNavigator, мы вместо этого необходимо использовать createBottomTabNavigator.

· Другим критическим изменением в версии 3 является Явный контейнер приложения, необходимый для корневого навигатора. Вместо экспорта RootNavigator вам необходимо экспортировать компонент приложения. Вы можете увидеть, как изменить свой код для использования контейнера приложений компонентов более высокого порядка https://reactnavigation.org/blog/2018/11/17/react-navigation-3.0#explicit-app-container-required-for -the-root-навигатор

· Переименуйте navigationOptions в конфигурации навигатора в defaultNavigationOptions.

· Обязательно замените все NavigationAction.reset() на StackActions.reset(), поскольку действие сброса было удалено из NavigationActions.

· Используйте класс navigationService для навигации внутри вашей функции действия, если у вас нет доступа к реквизитам навигации – https://reactnavigation.org/docs/3.x/navigating-without-navigation-prop.

· Если у вас есть Redux, интегрированный с реактивной навигацией, вы также можете столкнуться с некоторыми проблемами при миграции. Нам помогло изменение компонента AppNavigation из

To

Обновление React-Native Firebase

Нам также пришлось обновить версию React-Native-Firebase, потому что версия 4, которую мы использовали, устарела. Миграция на версию 6 была довольно простой, следуя этой статье — https://rnfirebase.io/migrating-to-v6. Он показывает все изменения, которые необходимо внести в проект, и то, как использовать новые зависимости. В нашем проекте нам пришлось добавить эти две зависимости:

“@react-native-firebase/app”: “14.5.1”,

«@react-native-firebase/messaging»: «14.5.1»,

Замена компонентов, удаленных из библиотеки React-Native Core

После обновления вышеуказанных библиотек и внесения некоторых незначительных исправлений мы смогли привести приложение в рабочее состояние. Затем нам пришлось исправить и обновить некоторые библиотеки, которые вызывали проблемы во время выполнения. Большинство исправлений, которые нам пришлось сделать, заключались в замене компонентов, которые были удалены из модуля React-Native Core, таких как NetInfo, Slider и Webview. В компонентах Slider и Webview не было никаких изменений в коде, и нам просто нужно было импортировать их из @react-native-community/slider и react-native-webview соответственно.